Я использую Python и Flask для получения данных из службы и Chart. js для построения графиков значений с течением времени. Я не могу заставить форматирование времени xAxes работать в Chart. js. Я новичок в JavaScript, поэтому, возможно, это что-то простое, например, пропущенная запятая, но я так не думаю.
My python передавал объект datetime в JavaScript. Я подумал, что, возможно, диаграмме. js нужна строка, поэтому я создал функцию stati c python, чтобы предоставить несколько строковых дат, но она дала тот же результат.
Скрипт Chart. js с Jinja2 создание шаблонов:
<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)
вывод:
Вывод диаграммы с днем, месяцем, датой, годом, время, UT C смещение, часовой пояс. Метки оси X должны быть просто временем, но независимо от того, что я пробую, метки остаются в формате по умолчанию, показанном выше.