Q: Chart.js v2 - x轴时间刻度配置

Question

我在折线图中设置 X 轴时遇到问题。
我有很多这样的数据集

        dataset_1 = [{
         x: '10:00'
         y: 12.4
        },{
         x: '12:00'
         y: 9.3
        },{
         x: '14:00'
         y: 10.9
        }]

        dataset_2 = [{
         x: '8:43'
         y: 5.7
        },{
         x: '9:00'
         y: 11.4
        },{
         x: '10:00'
         y: 9.6
        }]

      ecc... (i create this with ajax query)

newDataset.data.push('{x: ' + x_data + ',y: ' + y_data + '}');
chartData.data.datasets.push(newDataset);

我需要帮助来格式化 x 轴选项，以便在 x 轴上以 15 或 30 分钟步长查看从 00:00 到 23:59 的时间，而不会警告格式化或解析选项或数据集中的数据。

例如

  |
 7-
  |
  |    . x 8:43
 5-      y 5.7
  |
  |
  --|-----|-----|----
    8:00  9:00 10:00

我尝试了很多示例，但都不起作用

xAxes: [{
    type: 'time',
    time: {
     displayFormats: {
        minute: 'HH:mm'
         }
       }
    }]

非常感谢

Answer 1

你需要把图表实例化一下：

var start = new Date();
start.setHours(0,0,0,0);
var end = new Date();
end.setHours(23,59,59,999)
chartLine = new Chart(chartEl, {
    ...
    options: {
        ...
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    minUnit: 'minute',
                    unit: 'minute',
                    unitStepSize: 30,
                    min: start,
                    max: end
                },
                ...
            }
            ...
        }
    }
}