javascript - 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 来实现 time axis 的功能。因此您应该使用bundled version Chart.js 的一部分，其中在单个文件中包含 Moment.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>