“scales”选项似乎破坏了 Chart.js 图表

我正在尝试使用 Chart.js 在我的 django 项目中包含一些股票数据的折线图。我可以用我想要的数据渲染一个简单的图表，但是当我尝试格式化 x 轴的日期和时间时，图表不再渲染。这是该文件的工作版本 (client_small_market_view.html)：

{% load static %}

<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/Chart.min.js"></script>
<div id="container" class="chartjs-wrapper">
    <canvas id="stock-chart" class="chartjs" style="display: block;"></canvas>
</div>

<script>
    var dateFormat = 'YYYY-MM-DD';

    // the dates come ins as a list of strings formatted YYYY-MM-DD, so I use this function here to 
    // convert to Date
    function parseDate(date){
        var parts = date.split("-");
        return new Date(parts[0], parts[1] - 1, parts[2])
    };

    var config = {
        type: "line",
        data: {
            labels: {{ market_data.1|safe }}.map(dateString =>parseDate(dateString)),
            datasets: [
                {
                    label: "{{ market_data.0.0.0|safe }}",
                    data: {{ market_data.0.1.0|safe }},
                    fill: false,
                },
            ],
        },
        options:{
            title:{
                text: 'Market',
                display: true
            },
        }
    };

    var ctx = document.getElementById('stock-chart');
    var chart = new Chart(ctx, config);

</script>

这是它在我这边生成的图表。

但是，添加“scales”选项来格式化 x 轴标签，如下所示

{% load static %}

<script src="https://cdn.jsdelivr.net/npm/[email protected] /cdn-cgi/l/email-protection/dist/Chart.min.js"></script>
<div id="container" class="chartjs-wrapper">
    <canvas id="stock-chart" class="chartjs" style="display: block;"></canvas>
</div>

<script>
    var dateFormat = 'YYYY-MM-DD';

    function parseDate(date){
        var parts = date.split("-");
        return new Date(parts[0], parts[1] - 1, parts[2])
    };

    var config = {
        type: "line",
        data: {
            labels: {{ market_data.1|safe }}.map(dateString =>parseDate(dateString)),
            datasets: [
                {
                    label: "{{ market_data.0.0.0|safe }}",
                    data: {{ market_data.0.1.0|safe }},
                    fill: false,
                },
            ],
        },
        options: {
            title:{
                text: 'Market',
                display: true
            }
            // when I take 'scales' out the chart renders fine,
            // but I need it to format the x-axis dates
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        parser: 'YYYY-MM-DD',
                        unit: 'day',
                        displayFormats: {
                            'day': 'YYYY-MM-DD'
                        }
                    },
                    ticks: {
                        source: 'data'
                    }
                }]                    
            }
        }
    };

    var ctx = document.getElementById('stock-chart');
    var chart = new Chart(ctx, config);

</script>

给我留下了一张空白的画布。我花了几个小时试图找出问题所在，但无法弄清楚。作为参考，此 html 文档包含在用作应用程序主页的父文档中：

{% include './client_navbar.html'%}
{% include './client_small_market_view.html' with market_data=market_data%}
{% include './client_portfolios_summary_view.html' with portfolioss=portfolios %}

另外我还使用Bootstrap 4.4.1，但我无法想象这就是问题的原因。任何提示将非常感谢！

这似乎对我有用。您是否检查过浏览器以确保没有抛出任何阻止​​图表显示的 JS 异常？

具体来说，我相信您需要包括矩模块（https://momentjs.com/ https://momentjs.com/）以便使用

type: 'time'

如果模块由于某种原因未加载，它可能会抛出异常并给您一个空白图表。

这是描述类似问题的另一个参考：ChartJS 不使用 Moment.js 显示时间数据 https://stackoverflow.com/questions/58700638/chartjs-not-displaying-time-data-using-moment-js