ChartJS 如何在图表(chart js)上改变X步长?

jgovgodb  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(238)

我有一个X轴的图表-它是时间。但图表创建了很多日期在X轴上,当我收到的数据按月。如何改变X轴的步骤?如果我改变窗口的尺寸-步骤为X轴绘制按月。但当窗口是大-图表绘制步骤为每一天。
第一次
这是我创建图表的函数:

  1. draw() {
  2. if (this.mychart) {
  3. this.mychart.destroy();
  4. }
  5. const ctx = this.$refs.mainChart;
  6. this.mychart = new Chart(ctx,
  7. {
  8. type: 'line',
  9. data: {
  10. labels: this.labels,
  11. datasets: this.datacollection
  12. },
  13. options: {
  14. legend: {
  15. display: true,
  16. position: 'bottom',
  17. },
  18. responsive: true,
  19. elements: {
  20. },
  21. scales: {
  22. xAxes: [{
  23. type: "time",
  24. display: true,
  25. scaleLabel: {
  26. display: false,
  27. },
  28. ticks: {
  29. major: {
  30. fontStyle: "bold",
  31. fontColor: "#FF0000"
  32. },
  33. }
  34. }],
  35. yAxes: [
  36. {
  37. id: 'y1',
  38. type: 'linear',
  39. position: 'left',
  40. display: false
  41. },
  42. {
  43. id: 'y2',
  44. type: 'linear',
  45. position: 'right',
  46. display: false
  47. },
  48. {
  49. id: 'y3',
  50. type: 'linear',
  51. position: 'left',
  52. display: false
  53. },
  54. {
  55. id: 'y4',
  56. type: 'linear',
  57. position: 'right',
  58. display: false
  59. },
  60. {
  61. id: 'y5',
  62. type: 'linear',
  63. position: 'left',
  64. display: false
  65. },
  66. {
  67. display: false,
  68. gridLines: {
  69. display: false
  70. },
  71. scaleLabel: {
  72. display: true,
  73. labelString: this.labelY
  74. },
  75. ticks: {
  76. min: 0,
  77. beginAtZero: true,
  78. stepSize: 100
  79. }
  80. }]
  81. }
  82. }
  83. });
  84. },
ycggw6v2

ycggw6v21#

我找到了设置步长选项:

  1. scales: {
  2. xAxes: [{
  3. type: "time",
  4. time: {
  5. unit: 'month',
  6. },

相关问题