使用Chart.js仅在折线图的X轴上显示有限数量的标签

jvidinwx  于 2023-03-18  发布在  Chart.js
关注(0)|答案(2)|浏览(193)

1)如何使用chart.js在折线图的X轴上只显示第一个、中间个和最后一个或只显示第一个和最后一个标签(日期)?
2)此外,如果可能的话,我想只显示那些特定数量的垂直网格线。
代码:

  1. var myLineChart = new Chart(document.getElementById("line-chart"), {
  2. type: 'line',
  3. data: {
  4. labels: reportDate,
  5. datasets:[{
  6. label: 'ABC',
  7. data: abcArray,
  8. backgroundColor:"white",
  9. borderColor: "darkblue",
  10. fill: false,
  11. lineTension: 0,
  12. radius: 5
  13. },{
  14. label: 'DEF',
  15. data: defArray,
  16. backgroundColor:"white",
  17. borderColor: "magenta",
  18. fill: false,
  19. lineTension: 0,
  20. radius: 5
  21. },{
  22. label: 'XYZ',
  23. data: xyzArray,
  24. backgroundColor:"white",
  25. borderColor: "lightgreen",
  26. fill: false,
  27. lineTension: 0,
  28. radius: 5
  29. }]
  30. },
  31. options: {
  32. responsive: true,
  33. scales:{
  34. xAxes:[{
  35. ticks:{
  36. display: true
  37. }
  38. }],
  39. yAxes:[{
  40. gridLines:{
  41. display: false
  42. }
  43. }]
  44. },
  45. tooltips:{
  46. mode:'index'
  47. }
  48. }
  49. });

Line Chart Image

lg40wkob

lg40wkob1#

这一切都很完美。

  1. xAxes:[{
  2. ticks:{
  3. display: true,
  4. autoSkip: true,
  5. maxTicksLimit: 4
  6. }
  7. }]
gev0vcfq

gev0vcfq2#

高于Char.js版本4.21

xAxes已更改为x,数组格式已更改为对象格式
示例:

  1. scales: {
  2. x: {
  3. ticks: {
  4. display: true,
  5. autoSkip: true,
  6. maxTicksLimit: 15,
  7. },
  8. },
  9. },

图片来源:https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#common-tick-options-to-all-cartesian-axes

相关问题