Chart.js时间刻度不显示数据

Question

我有一个显示正常的Chart.js图表，直到我添加了一个时间刻度 。 配置如下所示：

    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对象（因为您的标签值），因此它使用new Date()创建2个date对象（这就是X轴仍然显示某些日期的原因）数据...注意它是2017年的日期，因为new Date()返回一个初始化为现在的Date ）。

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

这是一个代码示例 ，显示您的原始图表和正确的图表，以便您可以看到差异。