chartjs 在折线图中显示 24 小时

Posted 2023-03-14

【中文标题】chartjs 在折线图中显示 24 小时

【英文标题】：chartjs show 24 hours in line chart

【发布时间】：2018-08-26 20:01:27

【问题描述】：

从后端，我没有定期数据。数据按小时分组，我一天只能从后端获得几个小时。

有什么方法可以使用这些数据并在我的 x 轴上在 chartjs 折线图中显示 24 小时？

我收到的数据是这样的：

[
"hour": "2018-03-18T00:00:00.000Z",
"count": 230
, 
"hour": "2018-03-18T04:00:00.000Z",
"count": 450
]

hour 将是 x 轴，count 将是 y 轴。

我可以使用这些数据并显示 24 小时吗？

【参考方案1】：

由于您没有提供初始化 chartjs 插件的方式，假设您有此折线图配置，labels 是 x 轴上显示的日期，label 是顶部显示的图表名称，并且data 是要计算的 count 的总和。

var dataset = [
    "hour": "2018-03-18T00:00:00.000Z",
    "count": 230
    , 
    "hour": "2018-03-18T04:00:00.000Z",
    "count": 450
];

// group the dataset by date

var dataGroup = [];  // array of  date : count  
for (var idx in dataset) 
    var date = dataset[idx]['hour'].substr(0, 10);
    dataGroup[date] = dataGroup[date] || 0;
    dataGroup[date] += dataset[idx]['count'];


var labels = []; // labels shown on the x-axis
var data = []; // sum of count group by date
for (var date in dataGroup) 
    labels.push(date);
    data.push(dataGroup[date]);


var ctx = document.getElementById("chart").getContext("2d");
new Chart(ctx, 
    type: 'line',
    data: 
        labels: labels,
        datasets: [
            label: label,
            data: data,
            fillColor: "#79D1CF",
            strokeColor: "#79D1CF",
        ]
    
);