关于javascript：Chart.js的X轴未采用类型：”时间”


X-axis of Chart.js not taking type : 'time'

我一直在尝试使用Chart.js库绘制时间序列数据(来自温度传感器)。 python应用程序使用Flask将值和标签列表传递到.html模板文件。

经过几次迭代，我设法以正确的时间格式获取标签-现在通过图表通过"新Date()"处理标签，并在绘制的图表X轴刻度上将其视为有效日期。

但是，读数在X轴上等距分布(比例分布为"线性")，而不是按时间间隔。打印刻度的格式也需要截断为HH：mm：ss(因为数据范围将在几个小时之内)

几个已回答的问题建议设置选项：{scales：{xAxes：[type：as'time'.."，然后重设其他各种时标参数。但是，当我将注释行设置为xAxes类型添加到时间时，我的代码就崩溃了(图表停止渲染)。为什么？？特别是因为标签似乎被认为是日期时间戳！？

我尝试使用可用的代码段并阅读chart.js文档-但是该解决方案使我避开了。任何建议，以适当的滴答声分布和标签正确格式化时间轴，将不胜感激。我是javascript和stackoverflow的新手-敬请原谅任何明显的错误并提供指导。在此先感谢

此处是沿X轴绘制带有日期时间戳的图表

以下是生成图表的JS代码。它读取从Python Flask应用接收的数据。该行不起作用已被注释掉：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 new Chart(document.getElementById("line-chart"), {
  type: 'line',
  data: {
    labels : [{% for item in labels %}
               new Date("{{item}}"),
              {% endfor %}],
    datasets: [{
        data : [{% for item in values %}
                      {{item}},
                    {% endfor %}],
        label:"degrees centigrade",
        borderColor:"#3e95cd",
        fill: false
      }
    ]
  },
  options:{
    scales:{xAxes:[

//        type:'time'    //THIS BREAKS DOWN when uncommented

                  ]},
    title: {
      display: true,
      text: 'Temperature Sensor 1'
    \t}  
  }
 });

仅出于完整性考虑-发送的Python Flask数据如下：

1
2
3
4
5
6
@app.route('/trial', methods=['GET'])
def trial():
    temps_alt=[30.05,30.0,29.5,29.2,30.2,30.50]
    times_alt=['2013-02-08 09:30:26', '2013-02-08 09:30:36', '2013-02-08 09:30:56',
                 '2013-02-08 09:33:26', '2013-02-08 09:34:26', '2013-02-08 09:34:56']
    return flask.render_template('chart_ts_curve.html', values=temps_alt, labels=times_alt)

您忘了加括号。

Add

完整的代码段可以在这里找到