ChartJS - 将 x 轴标签从一天缩放到多个月

Question

我想创建一个折线图，它在 x 轴上有多个单日作为标签。这实际上工作得很好。我将这个 javascript 数组传递给 x_axis(example):

['2019-01-02', '2019-01-03', '2019-01-04', '2019-01-07', '2019-01-08', '2019-01-09', '2019-01-10', '2019-01-11', '2019-01-14', '2019-01-15', '2019-01-16']

问题是，图表可以有 50 个不同的 x 轴点，因此同时显示所有这些点没有意义，因为它填充了 x 轴。

我想改为缩放它，以便它只使用 x 轴上的月份。我一直在读到我必须用比例尺设置 xAxis，但我尝试了各种方法，但似乎没有用。

这是我尝试失败的示例：

  options: {
      scales: {
        xAxis: [{
          type: 'time',
          position: 'bottom',
          time: {
            parser: 'YYYY-MM-DD',
            displayFormats: {'day': 'MM/YY'},
            tooltipFormat: 'DD/MM/YY',
            unit: 'month',
          }
        }]
      },

谁能指点一下如何做到这一点？谢谢！

Answer 1

如果您使 displayFormats 中的条目与 unit 相同，它应该会按预期工作。

displayFormats: {
  month: 'MM/YY'
}

请查看下面的可运行代码，看看它是如何工作的。

const now = new Date();
const data = new Array(100).fill().map((v, i) => {
  const date = new Date();
  date.setDate(now.getDate() + i);
  return { x: date.toISOString().substring(0, 10), y: Math.floor(Math.random() * 10) };
});

new Chart('chart', {
  type: 'line',
  data: {
    datasets: [{
        label: "Data",        
        borderColor: "rgb(255, 0, 0)",
        data: data,
        fill: false
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        type: 'time',
        time: {
          parser: 'YYYY-MM-DD',
          unit: 'month',
          displayFormats: {
             month: 'MM/YY'
          },
          tooltipFormat: 'DD/MM/YY'
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script> 
<canvas id="chart" height="90"></canvas>

ChartJS - 将 x 轴标签从一天缩放到多个月

ChartJS - Scale x axis labels from single days to multiple months

javascript

jquery

twitter-bootstrap

chart.js