python - 如何使用 chart.js 在图表中显示日期时间列表
问题描述
我使用 python 从我的数据库中发送了一个列表中的日期时间值,格式如下所示。我现在想在图表中显示这些。
datasets: [{
label: '# temperature',
data: [datetime.datetime(2020, 4, 1, 9, 18, 58), datetime.datetime(2020, 4, 1, 9, 21, 1), datetime.datetime(2020, 4, 1, 10, 26, 56), datetime.datetime(2020, 4, 1, 10, 27, 9), datetime.datetime(2020, 4, 1, 10, 27, 35), datetime.datetime(2020, 4, 1, 10, 31, 6), datetime.datetime(2020, 4, 2, 17, 47, 4), datetime.datetime(2020, 4, 2, 17, 48, 18), datetime.datetime(2020, 4, 2, 17, 48, 56)]
解决方案
您可以使用 moment.js 执行此操作:
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
然后在您的图表脚本中使用moment()
如下示例。
请注意,月份是 0 索引的,因此您需要从 Python 月份中减去 1。
<script>
var dayFormat = 'YYYY-MM-DD hh:mm:ss';
function newDateString(year, month, day, hour, minute, second) {
return moment().year(year).month(month).date(day).hour(hour).minute(minute).second(second).format(dayFormat);
};
var data = {
labels: [ {% for item in labels %}
newDateString( {{ item.year }},
{{ item.month - 1 }},
{{ item.day }},
{{ item.hour }},
{{ item.minute }},
{{ item.second }}
),
{% endfor %}
],
series: [ {% for item in series %}
{{ item }},
{% endfor %}
]
};
var options = {
width: "640px",
height: "320px"
};
// Create a new line chart object where as first parameter we pass in a selector
// that resolves to our chart container element. The Second parameter
// is the actual data object.
new Chartist.Line('#chart1', data);
</script>
推荐阅读
- java - 在 Kotlin DTO 中使用 Java 可选
- javascript - 如何通过事件侦听器将按键值传递给函数?
- c - GCC编译的二进制文件中的冗余寄存器值?
- c# - 登录时 LoggedInTemplate 不显示(改为显示 AnonymousTemplate)
- vagrant - 在 windows server 2016 标准中运行 Vagrant
- python - 在Python中将算术序列转换为切片
- linux - 关于信号处理程序中的非信号安全系统调用
- python - 使用多重继承时 PyQt5 中的 MRO 错误
- python - 无法将 pytorch 安装到我的 anaconda 虚拟环境
- c - 当 Source 和 Include 在子目录中时如何编写 Makefile