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）。

這是一個代碼示例 ，顯示您的原始圖表和正確的圖表，以便您可以看到差異。