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

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

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

draw() {
  if (this.mychart) {
    this.mychart.destroy();
  }
  const ctx = this.$refs.mainChart;
  this.mychart = new Chart(ctx,
    {
      type: 'line',
      data: {
        labels: this.labels,
        datasets: this.datacollection
      },
      options: {
        legend: {
          display: true,
          position: 'bottom',
        },
        responsive: true,
        elements: {
        },
        scales: {
          xAxes: [{
            type: "time",
            display: true,
            scaleLabel: {
              display: false,
            },
            ticks: {
              major: {
                fontStyle: "bold",
                fontColor: "#FF0000"
              },
            }
          }],

          yAxes: [
            {
              id: 'y1',
              type: 'linear',
              position: 'left',
              display: false
            },
            {
              id: 'y2',
              type: 'linear',
              position: 'right',
              display: false
            },
            {
              id: 'y3',
              type: 'linear',
              position: 'left',
              display: false
            },
            {
              id: 'y4',
              type: 'linear',
              position: 'right',
              display: false
            },
            {
              id: 'y5',
              type: 'linear',
              position: 'left',
              display: false
            },

            {
              display: false,
              gridLines: {
                display: false
              },
              scaleLabel: {
                display: true,
                labelString: this.labelY
              },
              ticks: {
                min: 0,
                beginAtZero: true,
                stepSize: 100
              }
            }]
        }
      }

    });
},
ycggw6v2

ycggw6v21#

我找到了设置步长选项:

scales: {
              xAxes: [{

                type: "time",
                time: {
                  unit: 'month',
                                   },

相关问题