Question

我试图创建一个包含时间戳和值的200个点的折线图。我的理解是我需要将标签和数据分成2个不同的数组，以便与Chart.js 2.0（最新版本）一起使用。

完整代码：

var chartData = [],
    labelData = [],
    chartData2 = [];


_.each(historyData, function (row) {
    chartData.push({
        x: moment.unix(row[0]/1000).format('MMM DD HH:mm'), 
        y: row[1]
    });
    labelData.push(moment.unix(row[0]/1000).format('MMM DD HH:mm'));
    chartData2.push(row[1]);
});

console.log(chartData);
console.log(labelData);
console.log(chartData2);

new Chart(self.$splitChart, {
    type: 'line',
    data: {
        labels: labelData,
        datasets: [{
            label: 'EPC',
            data: chartData2,
            lineTension: 0,
            backgroundColor: 'rgba(55,166,119,.2)',
            borderColor: 'rgb(55,166,119)',
            pointRadius: 0,
            pointHitRadius: 10
        }]
    },
    options: {
        legend: {
            display: false
        },
        scales: {
            xAxes: [{
                type: 'linear',
                position: 'bottom'
            }]
        }
    }
});

示例labelData：

[＆＃34; 11月13日13:42＆＃34;，＆＃34; 11月13日14:02＆＃34;，＆＃34; 11月13日14:22＆＃34;，＆＃34; 11月13日14 ：42＆＃34;，＆＃34; 11月 13 15:02＆＃34;，＆＃34; 11月13日15:22＆＃34;，＆＃34; 11月13日15:42＆＃34;，＆＃34; 11月13日16：02＆＃34;，＆＃34 11月13日 16:22＆＃34;，＆＃34; 11月13日16:42＆＃34;，＆＃34; 11月13日17:03＆＃34;，＆＃34; 11月13日17:22＆＃34;，＆＃34; 11月13日 17：42＆＃34;，＆＃34; 11月13日18:02＆＃34;，＆＃34; 11月13日18:22＆＃34;，＆＃34; 11月13日18:42＆＃34;，＆＃34; 11月13日 19：02＆＃34;，＆＃34; Nov 13 19:22＆＃34;，＆＃34; Nov 13 19:42＆＃34;，＆＃34; Nov 13 20：02＆＃34;，＆＃34; 11月13日 20：22＆＃34;，＆＃34; 11月13日20:42＆＃34;，＆＃34; 11月13日21:02＆＃34;，＆＃34; 11月13日21:22＆＃34;，＆＃34; 11月13日 21：42＆＃34;，＆＃34; 11月13日22:02＆＃34;，＆＃34; 11月13日22:22＆＃34;]

示例chartData2：

[＆＃34; 0.005236＆＃34;，＆＃34; 0.005088＆＃34;，＆＃34; 0.005067＆＃34;，＆＃34; 0.005046＆＃34;，＆＃34; 0.005189＆＃34 ;, ＆＃34; 0.005164＆＃34;，＆＃34; 0.005134＆＃34;，＆＃34; 0.005373＆＃34;，＆＃34; 0.005331＆＃34;，＆＃34; 0.005371＆＃34;，＆＃34; 0.005480＆＃34;，＆＃34; 0.005420＆＃34;，＆＃34; 0.005520＆＃34;，＆＃34; 0.004876＆＃34;，＆＃34; 0.004822＆＃34;，＆＃34; 0.004770＆＃34;，＆＃34; 0.004397＆＃34;，＆＃34; 0.004346＆＃34;，＆＃34; 0.004295＆＃34;，＆＃34; 0.004302＆＃34;，＆＃34; 0.004259＆＃34;，＆＃34; 0.004217＆＃34;，＆＃34; 0.003969＆＃34;，＆＃34; 0.003935＆＃34;，＆＃34; 0.003897＆＃34;，＆＃34; 0.004048＆＃34;，＆＃34; 0.004027＆＃34;]

不幸的是，我没有获得一条线，x轴只是数字（不是格式化的时间戳或与时间戳的任何关系）。我已经尝试过确保数据是浮点数（不是字符串）。仍然没有。

Answer 1

发现问题是由xAxes选项中定义type: 'linear'引起的。删除它修复了问题，我的数据显示正常。

使用格式化的时间戳标签时，Chart.js折线图不显示

1 个答案: