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

Question

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

{% load static %}

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/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/chart.js@2.9.4/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，但我无法想象这就是问题的原因。任何提示将不胜感激！

Answer 1

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

具体来说，我认为您需要包含 moment 模块 (https://momentjs.com/) 才能使用

type: 'time'

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

这是描述类似问题的另一个参考：ChartJS not displaying time data using Moment.js