时间戳

首页 > 解决方案 > canvas.js 时间序列绘制错误（从 12 月到 1 月）

html - canvas.js 时间序列绘制错误（从 12 月到 1 月）

问题描述

如您所见，我在折线图（canvas.js）中绘制 KVA 与时间的关系，问题是数据是从 2019 年 1 月 14 日到 2018 年 2 月 13 日绘制的，但实际数据属于 2018 年 12 月 14 日到 1 月 14 日， 2019. 不确定这是 canvas.js 中的错误还是我做错了什么。怎么修。

var options = {
    zoomEnabled: true,
    animationEnabled: true,
    title: {
        text: selectedText
    },
    axisX:{
        title: "Timeline",
        gridThickness: 1
    },
    axisY: {
        title: "KVA",
        includeZero: false,
        lineThickness: 1

    },
    data: [{
        type: "line",
        dataPoints:dataPoints
        }]  // random data
};

我的数据点看起来像这样

dataPoints.push({ x: new Date(2018,12,13,06,09,38), y: 384 }); 
dataPoints.push({ x: new Date(2018,12,13,06,12,46), y: 386 }); 
dataPoints.push({ x: new Date(2018,12,13,06,15,53), y: 379 }); 
dataPoints.push({ x: new Date(2018,12,13,06,19,02), y: 377 });
....
....
dataPoints.push({ x: new Date(2019,01,11,17,11,12), y: 632 }); 
dataPoints.push({ x: new Date(2019,01,11,17,13,35), y: 616 }); 
dataPoints.push({ x: new Date(2019,01,11,17,15,49), y: 614 });

怎么修？ canva.js 时间序列

标签： htmlcanvasplottime-series

解决方案

我的错，这个月应该从 0 索引开始，而不是 1 索引。正确的代码是

while($row = mysqli_fetch_array($result)){

           $str = str_replace(array(":"," "),"-", $row['datetime']);
           $t = explode("-", $str);
           $month = $t[1]-1;

           echo 'dataPoints.push({
                        x: new Date('.$t[0].','.$month.','.$t[2].','.$t[3].','.$t[4].'),
                        y: '.$row['KVA'].'
                    });';
                }

也就是说，必须从 SQL Month 中减去 1 以使其成为 JavaScript Date() 正常工作的 0 索引。

推荐阅读