Javascript 悬停时的X轴标签错误

从上图可以看出，悬停标签与其下方的X标签不匹配。以下是我的ChartJS代码：

        labelsx = Array();
        for (i = 0; i < 24; i++) {
            hours = i;
            labelsx[labelsx.length] = hours + ":00";
        }
                buyerdata = [];
                traderdata = [];
                var c_data = JSON.parse(xhr.responseText);
                for (var i = 0; i < c_data["chart_buyers"].length; i++) {
                        buyerdata[buyerdata.length] = {x : c_data["chart_buyers"][i]["HourNumber"] + ":00", y: c_data["chart_buyers"][i]["Buyers"]}
                    }

                    for (var i = 0; i < c_data["chart_traders"].length; i++) {
                        traderdata[traderdata.length] = {x : c_data["chart_traders"][i]["HourNumber"] + ":00", y: c_data["chart_traders"][i]["TotalTraders"]}
                    }

                var config = {
                type: 'line',
                data: {
                    labels: labelsx,
                    datasets: [{
                        label: 'Buyers',
                        backgroundColor: window.chartColors.fillgreen,
                        borderColor: window.chartColors.green,
                        data: buyerdata,
                        fill: true
                    }, {
                        label: 'Traders',
                        fill: true,
                        backgroundColor: window.chartColors.fillblue,
                        borderColor: window.chartColors.blue,
                        data: traderdata
                    }]
                },
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                    title: {
                        display: false,
                        text: 'Buyers/Traders'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false,
                    },
                    hover: {
                        mode: 'nearest',
                        intersect: true
                    },
                    scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Time'
                            }
                        }],
                        yAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Number of Buyers/Traders'
                            }
                        }]
                    }
                }
            };
                var ctx = document.getElementById('myChart').getContext('2d');
                window.myLine = new Chart(ctx, config);

---

标签

数组中的元素应与

数据集中的元素对齐。数据

数组

换句话说，

数据集中的第一个元素。数据

将分配给

标签

在这种情况下，
标签X中的第一个元素=“0:00”

buyerdata

=

{“x”：“1:00”，“y”：“84”}

有几种方法可以解决这个问题

1）在

1开始标签，因为
0

for (i = 1; i < 24; i++) {
    var hours = i;
    labelsx[labelsx.length] = hours + ":00";
}

3）如果
0:00
确实没有任何数据，则从数据数组中的
null
条目开始

buyerdata = [null];
traderdata = [null];

请使用选项3）查看以下工作片段


var labelsx=Array（）；
对于（i=0；i<24；i++）{
var小时=i；
labelsx[labelsx.length]=小时+“：00”；
}
变量c_数据={
“图表买家”：[
{
“小时数”：“1”，
“买方”：“84”
},
{
“小时数”：“2”，
“买家”：“57”
},
{
“小时数”：“3”，
“买家”：“36”
}
],
“图表交易者”：[
{
“小时数”：“1”，
“TotalTraders”：“18”
},
{
“小时数”：“2”，
“TotalTraders”：“15”
},
{
“小时数”：“3”，
“TotalTraders”：“23”
}
]
};
buyerdata=[null]；
traderdata=[null]；
对于（var i=0；i
我已经编辑了这个问题。我在问题上添加了c_数据内容。谢谢：）
buyerdata[buyerdata.length] = {x : c_data["chart_buyers"][i]["HourNumber"] - 1 + ":00", y: c_data["chart_buyers"][i]["Buyers"]}

buyerdata = [null];
traderdata = [null];