chart.js 绘制时间序列

Question

试图将数据从 django 传递到网页以呈现响应式图表。数据被正确地传递给 js，但我让自己发疯，试图理解为什么charts.js 会抛出错误。

我已经硬编码了一些数据，例如：

function setLineChart() {

    var ctx = document.getElementById("myLineChart").getContext('2d');

    var dat_1 = {

        label: 'things',

        borderColor: 'blue',

        data: [

            {t: new Date("04/01/2020"), y: 310},

            {t: new Date("04/02/2020"), y: 315},

            {t: new Date("04/03/2020"), y: 320},

            ]

    };

    var myLineChart = new Chart(ctx, {

        type: 'line',

        data: {

            datasets: [dat_1]

        },

        options: {

            scales: {

                xAxes: [{

                    type: 'time',

                    time: {

                        unit: 'day'

                    },

                }],

                yAxes: [{

                    ticks: {

                        beginAtZero: true

                    }

            }]

            }

        }

    })

}

<canvas id="myLineChart" width="600" height="600"></canvas>

这会返回一个Uncaught TypeError: Cannot read property 'skip' of undefined我无法调试的错误。setLineChart()作为表单更新的 ajax 响应的一部分被调用。当我注释掉该options部分时，它确实呈现了一个图表，但错过了最后一个数据点，并undefined作为 x 轴标记。

任何帮助，将不胜感激。

Answer 1

Chart.js 内部使用 Moment.js 来实现时间轴的功能。因此，您应该使用在单个文件中包含 Moment.js 的 Chart.js捆绑版本。<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>这将解决您的问题，如下面的修改代码片段所示。var ctx = document.getElementById("myLineChart").getContext('2d');var dat_1 = {&nbsp; label: 'things',&nbsp; borderColor: 'blue',&nbsp; data: [&nbsp; &nbsp; { t: new Date("04/01/2020"), y: 310 },&nbsp; &nbsp; { t: new Date("04/02/2020"), y: 315 },&nbsp; &nbsp; { t: new Date("04/03/2020"), y: 320 },&nbsp; ]};var myLineChart = new Chart(ctx, {&nbsp; type: 'line',&nbsp; data: {&nbsp; &nbsp; datasets: [dat_1]&nbsp; },&nbsp; options: {&nbsp; &nbsp; scales: {&nbsp; &nbsp; &nbsp; xAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; type: 'time',&nbsp; &nbsp; &nbsp; &nbsp; time: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; unit: 'day'&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; }],&nbsp; &nbsp; &nbsp; yAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; beginAtZero: true&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; }&nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script><canvas id="myLineChart" height="90"></canvas>