如何在chart.js中隐藏网格线和x轴标签?

wtzytmuj  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(432)

我正在使用chart.js v3.2.0,我想禁用网格线和x轴标签。我已经尝试了其他堆栈溢出帖子中的各种示例,但似乎都不起作用。
https://jsfiddle.net/gcp95hjf/1/
超文本标记语言

  1. <div style = "width: 600px; height: 400px;">
  2. <canvas id="chartJSContainer" width="1" height="400"></canvas>
  3. </div>

日本

  1. var options = {
  2. type: 'line',
  3. data: {
  4. labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  5. datasets: [
  6. {
  7. label: '# of Votes',
  8. data: [12, 19, 3, 5, 2, 3],
  9. borderWidth: 1,
  10. backgroundColor: 'rgba(255, 99, 132, 0.2)',
  11. borderColor: 'rgba(255, 99, 132,1)'
  12. },
  13. {
  14. label: '# of Points',
  15. data: [7, 11, 5, 8, 3, 7],
  16. borderWidth: 1,
  17. backgroundColor: 'rgba(54, 162, 235, 0.2)',
  18. borderColor: 'rgba(54, 162, 235, 1)'
  19. }
  20. ]
  21. },
  22. options: {
  23. scales: {
  24. xAxes: [{
  25. display: false,
  26. ticks: {
  27. display: false //this will remove only the label
  28. }
  29. }],
  30. yAxes: [{
  31. display:false
  32. }]
  33. },
  34. responsive: true,
  35. maintainAspectRatio: false
  36. }
  37. }
  38. var ctx = document.getElementById('chartJSContainer').getContext('2d');
  39. new Chart(ctx, options);

有人知道怎么做吗?
谢谢

gxwragnw

gxwragnw1#

Chart.js v3有多处重大更改,其中之一是如何定义刻度,迁移指南中对此进行了说明,并在许多示例(https://www.chartjs.org/docs/3.2.1/getting-started/v3-migration.html)中进行了显示
您必须将scales: { yAxes: [], xAxes: []}更改为scales: { y: {}, x: {}}
工作提琴:https://jsfiddle.net/Leelenaleee/r26h71fm/2/

q3qa4bjr

q3qa4bjr2#

隐藏两个坐标轴上的网格线-
ChartJS v2(旧版本)-

  1. scales: {
  2. x: [
  3. {
  4. gridLines: {
  5. display: false,
  6. },
  7. },
  8. ],
  9. y: [
  10. {
  11. gridLines: {
  12. display: false,
  13. },
  14. },
  15. ],
  16. },

较新版本ChartJS v3 -

  1. scales: {
  2. x: {
  3. grid: {
  4. display: false,
  5. },
  6. },
  7. y: {
  8. grid: {
  9. display: false,
  10. },
  11. },
  12. },
展开查看全部

相关问题