chart.js绘制时间序列

Question

[尝试将数据从Django传递到网页以呈现响应图。数据已正确传递给js，但我让自己发疯，试图了解为什么chart.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来实现time axis的功能。因此，您应该使用在单个文件中包含Moment.js的Chart.js的bundled version。

<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="myChart" height="90"></canvas>
<canvas id="myLineChart" height="90"></canvas>