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

  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

        }

      }]

    }

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>

<canvas id="myLineChart" height="90"></canvas>