Chart.js x 轴日期时间格式化失败

Question

我正在使用 Python 和 Flask 从服务和 Chart.js 获取数据以绘制一段时间内的值。我无法让 xAxes 时间格式在 Chart.js 中工作。我是 JavaScript 新手，所以它可能很简单，比如缺少逗号，但我不这么认为。

我的 python 正在将一个日期时间对象传递给 JavaScript。我想也许 chart.js 需要一个字符串，所以我创建了一个静态 python 函数来提供一些字符串日期，但它产生了相同的结果。

带有测试数据的 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)

输出：

带有日、月、日期、年、时间、UTC 偏移量、时区的图表输出。 X 轴标签应该只是时间，但无论我尝试什么标签都保持上面显示的默认格式。

Answer 1

您的图表配置在更改Type: 'time'为type: 'time'.&nbsp;您可以运行以下版本，它会替换您的 Python 模板变量。这里有一些其他的事情要检查更正type错字后，查找控制台错误。确保 moment.js 正确加载。检查 moment.js 和 Chart.js 的版本（下面的示例分别使用 2.26.0 和 2.9.3）。提供实际的 HTML 源代码（而不是模板），因为如果它仍然损坏，则意味着模板/传递值有问题。const config = {&nbsp; // The type of chart we want to create&nbsp; type: 'line', //types: bar, horizontalBar, pie, line, doughnut, radar, polarArea&nbsp; // The data for our dataset&nbsp; data: {&nbsp; &nbsp; 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')],&nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; label: 'Test String Dates',&nbsp; &nbsp; &nbsp; backgroundColor: 'rgba(255, 99, 132, 0)',&nbsp; &nbsp; &nbsp; borderColor: 'rgb(117, 4, 28)',&nbsp; &nbsp; &nbsp; borderWidth: 1,&nbsp; &nbsp; &nbsp; hoverBorderWidth: 3,&nbsp; &nbsp; &nbsp; hoverBorderColor: '#000',&nbsp; &nbsp; &nbsp; data: [0.05, 0.07, 0.15, 0.08, 0.05],&nbsp; &nbsp; }]&nbsp; },&nbsp; options: {&nbsp; &nbsp; title: {&nbsp; &nbsp; &nbsp; display: true,&nbsp; &nbsp; &nbsp; text: 'test string date time',&nbsp; &nbsp; &nbsp; fontSize: 25,&nbsp; &nbsp; },&nbsp; &nbsp; legend: {&nbsp; &nbsp; &nbsp; //display:false //to hide legend&nbsp; &nbsp; &nbsp; position: 'right',&nbsp; &nbsp; &nbsp; labels: {&nbsp; &nbsp; &nbsp; &nbsp; fontColor: '#000'&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; tooltips: {&nbsp; &nbsp; &nbsp; //enabled:false,&nbsp; &nbsp; },&nbsp; &nbsp; scales: {&nbsp; &nbsp; &nbsp; yAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; scaleLabel: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; labelString: 'mg/m3',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontColor: '#000',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontWeight: 'bold',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontSize: 25&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }],&nbsp; &nbsp; &nbsp; xAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; type: 'time',&nbsp; &nbsp; &nbsp; &nbsp; time: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; parser: 'HH:mm:ss a', //these formatting values do nothing, I've tried a few different ones&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; unit: 'second', //I have tried minutes and hours too, same result&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; displayFormats: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'millisecond': 'HH:mm:ss a', //I have tried without the 'a' too, same result&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'second': 'HH:mm:ss a',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'minute': 'HH:mm:ss a',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'hour': 'HH:mm:ss a',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'day': 'HH:mm:ss a',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'week': 'HH:mm:ss a',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'month': 'HH:mm:ss a',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'quarter': 'HH:mm:ss a',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'year': 'HH:mm:ss a',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: 'auto'&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; scaleLabel: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; labelString: 'Recording Time',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontColor: '#000',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontWeight: 'bold',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontSize: 25&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; },&nbsp; &nbsp; responsive: true,&nbsp; &nbsp; maintainAspectRatio: false,&nbsp; &nbsp; elements: {&nbsp; &nbsp; &nbsp; point: {&nbsp; &nbsp; &nbsp; &nbsp; radius: 0&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; line: {&nbsp; &nbsp; &nbsp; &nbsp; tension: 0&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; }};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>&nbsp; <canvas id="canvas" width="600" height="400"></canvas></body>