以x轴为日数的JS线图

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-axis选项，但它总是扰乱输出。

Answer 1

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

labels.push({dataDateTime});

这就是为什么你要得到一个X-axis标签与[Object object]..。您有两个可能的解决方案：

1.更改push:

labels.push(dataDateTime);

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

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

两者都会运行良好(我测试过)，您也可以检查我制作的小提琴，以检查它是否正常(使用第一个解决方案)。