我正在使用 Python 和 Flask 从服务和 Chart.js 获取数据以绘制一段时间内的值。我无法让 xAxes 时间格式在 Chart.js 中工作。我是 JavaScript 新手，所以它可能很简单，比如缺少逗号，但我不这么认为。我的 python 正在将一个日期时间对象传递给 JavaScript。我想也许 chart.js 需要一个字符串，所以我创建了一个静态 python 函数来提供一些字符串日期，但它产生了相同的结果。带有测试数据的 Python 函数：from flask import Flask, Blueprint, render_template, requeststringDate_bp5 = Blueprint('stringDate_bp5', __name__, template_folder='../templates', static_folder='../stringDate/static/vendor/', static_url_path='/stringDate/static/vendor/')@stringDate_bp5.route("")def stringDate(): #reading1 = datetime.datetime(2019, 12, 19, 13, 36, 29, tzinfo=<DstTzInfo 'US/Pacific' PST-1 day, 16:00:00 STD>) labels = ['2019-12-19T13:36:29-08:00', '2019-12-19T13:36:59-08:00', '2019-12-19T13:37:29-08:00', '2019-12-19T13:37:59-08:00', '2019-12-19T13:38:29-08:00'] values = [0.05, 0.07, 0.15, 0.08, 0.05] legend = 'Test String Dates' return render_template('chart2.html', values=values, labels=labels, legend=legend)输出：带有日、月、日期、年、时间、UTC 偏移量、时区的图表输出。 X 轴标签应该只是时间，但无论我尝试什么标签都保持上面显示的默认格式。
1 回答
开满天机
TA贡献1786条经验 获得超13个赞
您的图表配置在更改Type: 'time'为type: 'time'. 您可以运行以下版本，它会替换您的 Python 模板变量。
这里有一些其他的事情要检查
更正
type错字后，查找控制台错误。确保 moment.js 正确加载。
检查 moment.js 和 Chart.js 的版本（下面的示例分别使用 2.26.0 和 2.9.3）。
提供实际的 HTML 源代码（而不是模板），因为如果它仍然损坏，则意味着模板/传递值有问题。
const config = {
// The type of chart we want to create
type: 'line', //types: bar, horizontalBar, pie, line, doughnut, radar, polarArea
// The data for our dataset
data: {
labels: [new Date('2019-12-19T13:36:29-08:00'), new Date('2019-12-19T13:36:59-08:00'), new Date('2019-12-19T13:37:29-08:00'), new Date('2019-12-19T13:37:59-08:00'), new Date('2019-12-19T13:38:29-08:00')],
datasets: [{
label: 'Test String Dates',
backgroundColor: 'rgba(255, 99, 132, 0)',
borderColor: 'rgb(117, 4, 28)',
borderWidth: 1,
hoverBorderWidth: 3,
hoverBorderColor: '#000',
data: [0.05, 0.07, 0.15, 0.08, 0.05],
}]
},
options: {
title: {
display: true,
text: 'test string date time',
fontSize: 25,
},
legend: {
//display:false //to hide legend
position: 'right',
labels: {
fontColor: '#000'
}
},
tooltips: {
//enabled:false,
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'mg/m3',
fontColor: '#000',
fontWeight: 'bold',
fontSize: 25
}
}],
xAxes: [{
type: 'time',
time: {
parser: 'HH:mm:ss a', //these formatting values do nothing, I've tried a few different ones
unit: 'second', //I have tried minutes and hours too, same result
displayFormats: {
'millisecond': 'HH:mm:ss a', //I have tried without the 'a' too, same result
'second': 'HH:mm:ss a',
'minute': 'HH:mm:ss a',
'hour': 'HH:mm:ss a',
'day': 'HH:mm:ss a',
'week': 'HH:mm:ss a',
'month': 'HH:mm:ss a',
'quarter': 'HH:mm:ss a',
'year': 'HH:mm:ss a',
}
},
ticks: {
source: 'auto'
},
scaleLabel: {
display: true,
labelString: 'Recording Time',
fontColor: '#000',
fontWeight: 'bold',
fontSize: 25
}
}]
},
responsive: true,
maintainAspectRatio: false,
elements: {
point: {
radius: 0
},
line: {
tension: 0
}
},
}
};
const ctx = document.getElementById('canvas').getContext('2d');
new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</body>
添加回答
举报
0/150
提交
取消