javascript - Chart JS - x 轴为天数的折线图

Question

我需要绘制图表，其中 x 轴为上午 12 点。它使用了相当多的点

这是我想要的输出

但这就是我得到的输出:

我在 x 轴上得到了这个奇怪的“对象对象”

        //I have truncated the stats as it exceeded the max length in SO            
        let response = '{"stats":[ { "time":"2018-10-24 13:30:02", "occupation":"54", "liveness":"78", "efficiency":"48", "pms":"up" }, { "time":"2018-10-24 13:45:02", "occupation":"55", "liveness":"78", "efficiency":"50", "pms":"up" }, { "time":"2018-10-24 14:00:01", "occupation":"56", "liveness":"76", "efficiency":"51", "pms":"up" }, { "time":"2018-10-24 14:15:02", "occupation":"56", "liveness":"77", "efficiency":"52", "pms":"up" }, { "time":"2018-10-24 14:30:01", "occupation":"56", "liveness":"78", "efficiency":"53", "pms":"up" }, { "time":"2018-10-24 14:45:01", "occupation":"57", "liveness":"79", "efficiency":"56", "pms":"up" }, { "time":"2018-10-24 15:00:02", "occupation":"57", "liveness":"79", "efficiency":"56", "pms":"up" }]}';
        let parsedResponse = ($.parseJSON(response));

        let stats = parsedResponse.stats;
        let arrayDays = [];
        $.each(parsedResponse.days, function(key, value) {
            arrayDays.push(moment(value).toDate());
        });

        let statLength  = stats.length;
        let occupation  = [];
        let liveness    = [];
        let efficiency  = [];
        let labels      = [];

        parsedResponse = undefined;

        let dataDateTime        = '';
        let dataDateTimeFormat  = 'MMM DD HH:mm A';
        for(let index = 0; index < statLength; index++) {
            dataDateTime = moment(stats[index]['time']).format(dataDateTimeFormat);

            // occupation.push({'x': dataDateTime, 'y': stats[index]['occupation']});
            // liveness.push({'x': dataDateTime, 'y': stats[index]['liveness']});
            // efficiency.push({'x': dataDateTime, 'y': stats[index]['efficiency']});

            occupation.push(stats[index]['occupation']);
            liveness.push(stats[index]['liveness']);
            efficiency.push(stats[index]['efficiency']);
            labels.push({dataDateTime});
        }

        let fill = false;
        let color = Chart.helpers.color;
        let data = {
            labels: labels,
            datasets: [{
                label: 'Screens',
                pointRadius: 0,
                tension: 0,
                backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
                borderColor: window.chartColors.green,
                fill: fill,
                data: liveness
            },{
                label: 'Occupation',
                pointRadius: 0,
                tension: 0,
                backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                borderColor: window.chartColors.blue,
                fill: fill,
                data: occupation
            },{
                label: 'Efficiency',
                pointRadius: 0,
                tension: 0,
                backgroundColor: color(window.chartColors.orange).alpha(0.5).rgbString(),
                borderColor: window.chartColors.orange,
                fill: fill,
                data: efficiency
            }]
        };

        let chartOptions = {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true,
                        stepSize: 10,
                        max: 100
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Percentage'
                    }

                }],
                xAxes: [{
                    //editing this will mess it up pretty bad
                }]
            },
            tooltips: {
                callbacks: {
                    label: function(value, index) {
                        return index.datasets[value.datasetIndex].label + ": " + value.yLabel;
                    },
                }
            }
        };

问题是，我多次尝试编辑 x 轴选项，但它一直弄乱输出

Answer 1

您的变量dataDateTime，出于某种原因，您将其作为标签值中的对象推送，就在这里:

labels.push({dataDateTime});

这就是为什么您会获得带有 [Object object] 的 X-axis 标签...您有两种可能的解决方案:

1.更改推送:
labels.push(dataDateTime);

2.向 xAxes[0].ticks 属性添加回调:

xAxes: [{
  ticks: {
    callback: function(value, index, values) {
       return value.dataDateTime
    }
  }
}]

两者都可以很好地工作(我测试过)，你也可以检查这个fiddle我制作的，检查它是否正常工作(使用第一个解决方案)