列宽相等的折线图

时间:2019-02-12 04:31:16

标签: chart.js

我用chart.js创建了一个折线图,当我填充它时,最后一列比前面的列宽。它已将数据集除以显示列的数量,然后将其余的放入最后一列。数据点的数量各不相同,并且大于列的数量,我不知道将要显示多少个数据点或chart.js将选择显示多少列。我可以截断数据以强制匹配最后一列,但是我不知道在渲染图形之前它将创建多少列。

有没有办法完成我想做的事情?

更新:

var options = {
    layout: {
        padding: {
            top: 5
        }
    },
    responsive: true,
    legend: {
        display: true,
        position: 'bottom',
        // disable legend onclick remove slice
        onClick: null
    }
};

var dataset = new Object();
dataset = [{
    label: '',
    data: [],
    fill: false,
    borderColor: "rgb(75, 192, 192)",
    pointBackgroundColor: '#000000',
    pointRadius: 1
}, {
    label: 'Set Point',
    data: [],
    fill: false,
    borderColor: "rgb(192, 192, 75)",
    pointRadius: 1
}];

var lineChart = new Chart(graph, {
    type: 'line',
    data: {
        labels: [],
        datasets: dataset
    },
    options: options
});
lineChart.config.data.datasets[0].label = sensor.Name;

for (var i = 0; i < tempLen; i++) {
    var tempData = sensor.TemperatureData[i];
    lineChart.config.data.labels.push(new Date(tempData.Timestamp).format('Y-m-#d #H:i'));
    lineChart.config.data.datasets[0].data.push(tempData.Value);
    lineChart.config.data.datasets[1].data.push(sensor.SetPoint);
}
lineChart.update(0);

0 个答案:

没有答案