javascript - Chart.js时间刻度未显示数据

Question

我有一个Chart.js图表，该图表显示良好，直到我向其添加了time scale为止。配置如下所示:

    this.chart = new Chart(this.ctx, {
        type: 'line',
        data: data,
        options: {
            legend: {
                display: false
            },
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'month',
                        format: 'timeFormat'
                    }
                }]
            }
        }
    });

data对象如下所示:

let data = {
    labels: ["1485903600", "1490738400"],
    datasets: [{
        label: '',
        data: [120, 30],
        lineTension: 0
    }]
};

x轴正确显示两个日期，y轴以正确的限制(即120和30)为边界，但是数据未显示在图表上。

Answer 1

转换为时间刻度时，图表不显示数据的原因是因为您传递了Date构造函数无法解析的标签的字符串值。

时标需要一个整数(自纪元以来的毫秒数)，一个Date对象，一个moment.js对象或一个日期字符串，其格式为Date.parse()可以理解。

因此，在您的情况下，呈现图表时，它不能为X轴创建Date对象(由于标签值)，因此它使用date创建2个new Date()对象(这就是X轴仍显示一些日期数据的原因。请注意，这是2017年的日期，因为new Date()返回了立即初始化为现在的Date)。

要解决此问题，只需将标签值转换为整数(例如，删除引号)，然后图表就会显示您的数据点。但是，该图表看起来仍然很有趣，因为X刻度以month为单位进行配置，但是您的数据值相隔仅1天(1485903600 = 1970年1月17日10:45 PM和1490738400 = 1970年1月18日12:05 AM)。

这是一个codepen example，它显示原始图表和正确的图表，以便您可以看到不同之处。