图表JS-在x轴上具有天数的折线图

Question

我需要使用x轴绘制图表，以上午12.00点为准。 它使用了很多要点

这是我的愿望输出

但这是我得到的输出：

我在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
    }
  }
}]

两者都可以正常工作（我测试过），您也可以检查我制作的小提琴 ，以检查它是否工作正常（使用第一个解决方案）