Question

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

经过一些迭代后，我设法以正确的时间格式获取标签 - 现在由＆＃34;新的Date（）＆＃34;处理。按图表 - 并在绘制的图表X轴上标记为有效日期。

然而，读数在X轴上的间距相等（比例分布为“线性”），而不是每个时间间隙。打印标记的格式也需要截断为HH：mm：ss（因为数据范围将在几个小时内）

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

我尝试使用可用的代码片段并阅读chart.js文档 - 但解决方案避开了我。任何建议正确格式化时间轴，合适的刻度分布和标签将非常感激。我是javascript和stackoverflow的新手 - 请原谅任何明显的错误并提供指导。提前致谢

Here is the chart being plotted with date-time stamps along X axis

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

＆＃13;

<script>

 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'
    	}   
  }
 });
 
</script>

＆＃13;

为了完整性 - 正在发送的Python Flask数据如下：

＆＃13;

@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)

＆＃13;

Answer 1

您忘了加括号。

可以找到完整的摘录here

Chart.js的X轴没有输入类型：＆＃39; time＆＃39;

1 个答案: