我正在使用Python和Flask从服务中获取数据，并随时间将Chart.js转换为图表值。我无法使xAxes时间格式在Chart.js中工作。我是JavaScript新手，所以也许有点简单，例如缺少逗号，但我不这么认为。
我的python正在将datetime对象传递给JavaScript。我以为chart.js可能需要一个字符串，所以我创建了一个静态python函数来提供一些字符串日期，但结果却相同。
具有Jinja2模板的Chart.js脚本：
<head>
<meta charset="utf-8" />
<title>Chart.js Example</title>
<!-- import plugin script -->
<script src={{ url_for('static', filename="vendor/chart.min.js") }}></script>
<script src={{ url_for('static', filename="vendor/moment.min.js") }}></script>
<!--<script src='static/vendor/chart.min.js'></script>
<link rel="stylesheet" href={{ url_for('static', filename="chartStyle.css") }}> -->
</head>
<body>
<h1>Simple Line Chart</h1>
<div class="container" style="position: relative; height:40vh; width:80vw">
<canvas id="myChart"></canvas>
</div>
<div>
<table>
<tr>
<th>DateTime</th>
</tr>
{% for itme in labels %}
<tr><td>{{itme}}</td></tr>
{% endfor %}
</table>
</div>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
// define the chart data
var chart = new Chart(ctx, {
// 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: [
{% for item in labels %}
new Date('{{item}}'), //I've tried inserting a string instead of date object
//'{{item}}',
{% endfor %}],
datasets: [{
label: '{{ legend }}',
backgroundColor: 'rgba(255, 99, 132, 0)',
borderColor: 'rgb(117, 4, 28)',
borderWidth:1,
hoverBorderWidth:3,
hoverBorderColor:'#000',
data: [{% for item in values %}
{{item}},
{% endfor %}],
}]
},
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
}
},
}
});
</script>
</body>
</html>
带有测试数据的Python函数：
from flask import Flask, Blueprint, render_template, request
stringDate_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)
输出：
Chart output with Day, Month, date, year, time, UTC offset, timezone.X轴标签应该只是时间，但是无论我尝试什么，标签都将保持上面显示的默认格式。
将Type: 'time'更改为type: 'time'后，您的图表配置看起来很好。您可以运行以下版本，以替换您的Python模板变量。
这里还有其他要检查的内容
type错字后，查找控制台错误。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>