Question

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

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

我收到的数据是这样的：

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

小时为x轴，计数为y轴。

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

Answer 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",
        ]
    }
});

chartjs在折线图中显示24小时

1 个答案: