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轴选项，以便在00:00到23:59之间查看x轴上15或30分钟的步骤，而不会在选项或数据集中格式化或解析数据时发出任何警告。

例如

  |
 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
                },
                ...
            }
            ...
        }
    }
}

问：Chart.js v2 - x轴时间刻度配置

1 个答案: