'scales' option appears to break Chart.js graph

问题

I'm trying to include a line chart for some stock data in my django project using Chart.js. I can render a simple chart with the data I want just fine, but when I try to format the x-axis for date and time, the chart doesn't render anymore. Here's the working version of the file (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>

And here is the graph it produces on my end.

here

However, adding in the 'scales' option to format the x-axis labels like here

{% 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>

leaves me with a blank canvas. I've spent hours and hours trying to figure out what the problem is, but can't figure it out. For reference this html doc is included in a parent doc that serves as the home page for the app :

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

In addition I'm also using Bootstrap 4.4.1, but I can't imagine that's the reason for the problem. Any tips would be greatly appreciated!

回答1:

It seems to work for me. Have you checked in your browser to make sure you're not getting any JS exceptions being thrown that are preventing the chart from being displayed?

Specifically, I believe you need to include the moment module (https://momentjs.com/) in order to use

type: 'time'

If the module is not loading for some reason, it could be throwing an exception and giving you a blank chart.

Here's another reference describing a similar problem: ChartJS not displaying time data using Moment.js

来源：https://stackoverflow.com/questions/65242381/scales-option-appears-to-break-chart-js-graph

标签

javascript

html

django

chart.js