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()可以理解的格式的日期的字符串表示.

因此,在您的情况下,当渲染图表时,它无法Date为X轴创建对象(因为您的标签值),因此它使用创建2个date对象new Date()(这就是为什么X轴仍然显示一些日期数据...请注意这是2017年的日期,因为现在new Date()返回Date初始化).

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

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