悬停时X轴标签错误

Question

如上图所示，

悬停标签在其下方的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值定义了标签，并且在数据集上为for循环定义了x和y。如果数据应该在应该指向这些点的X标签上匹配，但是将鼠标悬停在这些点上，则会导致工具提示与该点以下的X标签不匹配。解决此问题的方法是什么？

这是c_data["chart_traders"]和c_data["chart_buyers"]的示例数据

{
    "chart_buyers": [
        {
            "HourNumber": "1",
            "Buyers": "84"
        },
        {
            "HourNumber": "2",
            "Buyers": "57"
        },
        {
            "HourNumber": "3",
            "Buyers": "36"
        }
    ],
    "chart_traders": [
        {
            "HourNumber": "1",
            "TotalTraders": "18"
        },
        {
            "HourNumber": "2",
            "TotalTraders": "15"
        },
        {
            "HourNumber": "3",
            "TotalTraders": "23"
        }
    ]
}

Answer 1

labels数组中的元素应与datasets.data数组中的元素

换句话说，datasets.data中的第一个元素将分配给labels中的第一个元素

在这种情况下，
labelsx = "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";
}

2）将HourNumber的数量减少1

buyerdata[buyerdata.length] = {x : c_data["chart_buyers"][i]["HourNumber"] - 1 + ":00", y: c_data["chart_buyers"][i]["Buyers"]}

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

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

使用选项 3） ...

查看以下工作片段

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

var c_data = {
    "chart_buyers": [
        {
            "HourNumber": "1",
            "Buyers": "84"
        },
        {
            "HourNumber": "2",
            "Buyers": "57"
        },
        {
            "HourNumber": "3",
            "Buyers": "36"
        }
    ],
    "chart_traders": [
        {
            "HourNumber": "1",
            "TotalTraders": "18"
        },
        {
            "HourNumber": "2",
            "TotalTraders": "15"
        },
        {
            "HourNumber": "3",
            "TotalTraders": "23"
        }
    ]
};

buyerdata = [null];
traderdata = [null];
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: 'rgba(0,255,0,0.5)',
            borderColor: 'rgba(0,255,0,1)',
            data: buyerdata,
            fill: true
        }, {
            label: 'Traders',
            fill: true,
            backgroundColor: 'rgba(0,0,255,0.5)',
            borderColor: 'rgba(0,0,255,1)',
            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);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart" height="500" width="1000"></canvas>