将时间缩放添加到折线图(Chart.js）

Add Time Scaling to linechart (Chart.js)

本文关键字：Chart js 折线图 时间 缩放 添加      更新时间：2023-09-26

Heey all，

我正在使用chartjs生成视图图表。数据现在已经正确加载，但我在x轴标签上遇到了问题。由于Chart.js确实支持时间刻度，我想知道它是如何工作的？时间表应该是动态的。并且应随时间显示值。

这是我迄今为止所尝试的，但不知何故，我在x轴上没有得到时间值。https://jsfiddle.net/fwxvb2zp/1/

我使用的是最新的Chart.js（2.1.2）

正如你们可能在对象中看到的那样，有一个可用的时间戳。这是用于在图中插入数据的时间戳。我发送的对象如下：

var object = [  
    {  
        "avg_c_p_u":[  
            0.56,
            0.38,
            0.33
        ],
        "timestamp":1463054879000
    }
]

see below updated method from your jsFiddle code:
add below 2 lines:
chartdata.data.labels.shift();
chartdata.data.labels.push(Math.random().toFixed(2));

$.each(data, function() {
    var tmp = chartdata.data.datasets[0].data;
    tmp.shift();
    tmp.push(this['avg_c_p_u'][0]*100);
    chartdata.data.datasets[0].data = tmp;
    chartdata.data.labels.shift(); //new line
    chartdata.data.labels.push(Math.random().toFixed(2));//new line
    chartdata.update();
  });
相关文章：