我一直在尝试使用Chart.js库绘制时间序列数据（来自温度传感器） . python应用程序使用Flask将值和标签列表传递给.html模板文件 .
经过一些迭代后，我设法以正确的时间格式获得标签 - 现在由图表处理“新日期（）”，并在绘制的图表X轴刻度上看作有效日期 .
然而，读数在X轴上是等间隔的（比例分布是“线性的”），而不是每个时间间隙 . 打印标记的格式也需要截断为HH：mm：ss（因为数据范围将在几个小时内）
几个回答的问题建议设置选项：{scale：{xAxes：[type：as'time'..然后重置各种其他时间尺度参数 . 但是，当我将注释行设置xAxes类型添加到时间时，我的代码会崩溃（图表停止渲染） . 为什么？？特别是因为标签似乎被认为是日期时间戳！？
我已经尝试使用可用的代码片段并阅读chart.js文档 - 但解决方案避开了我 . 任何建议正确格式化时间轴，合适的刻度分布和标签将非常感激 . 我是javascript和stackoverflow的新手 - 请原谅任何明显的错误并提供指导 . 提前致谢
Here is the chart being plotted with date-time stamps along X axis
以下是生成图表的JS代码 . 它读取从Python Flask应用程序收到的数据 . 该行无效已被注释掉：
<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>
只是为了完整性 - 正在发送的Python Flask数据如下：
@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)
1 回答
你忘了添加括号了 .
完整的代码段可以找到here