Chart.js - 时间线

Question

我正在尝试使用 Chart.js 在 xAxes 上显示日期

我尝试了 2 个日期，但没有显示任何内容。 可能是我在标签或日期格式上做错了。

<canvas id="graph"></canvas>

<script>
    var ctx = document.getElementById('graph').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ["2013-02-08", "2013-02-10"],
            datasets: [{
                label: "Something",
                data: [{
                    x: "2013-02-08",
                    y: 1
                }, {
                    x: "2013-02-10",
                    y: 10
                }]
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'day'
                    }
                }]
            }
        }
    });
</script>

需要帮忙：）

Answer 1

您的代码看起来不错，只是您不需要定义data.labels ，因为data集中的数据通过包含x和y属性的对象定义为单个点。

Chart.js 内部使用Moment.js来实现时间轴的功能。 因此，您应该使用在单个文件中包含 Moment.js 的 Chart.js 的捆绑版本。

 var ctx = document.getElementById('graph').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { datasets: [{ label: "Something", data: [ { x: "2013-02-08", y: 1 }, { x: "2013-02-10", y: 10 } ] }] }, options: { scales: { xAxes: [{ type: 'time', time: { unit: 'day' } }] } } });

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