javascript - Chart.js 折线图工具提示显示错误的标签，当线条不是从第一个标签开始时

Question

我有一个简单的折线图，x 轴上有 5 个标签:'Oct 2018', 'Jan 2019', 'Apr 2019', 'Jul 2019', 'Oct 2019'以及仅在 3 个中间标签上具有点的线 'Jan 2019', 'Apr 2019', 'Jul 2019' .
问题是当行数据不是从第一个标签开始时(就像我的例子一样)，工具提示在悬停时显示不正确的标签。从下图中可以看出，当我将鼠标悬停在 'Apr 2019' 上时数据点，工具提示显示 'Jan 2019' .同样，当我将鼠标悬停在 'Jul 2019' 上时数据点，工具提示显示 'Apr 2019' .你能告诉我我错过了什么吗？

这是代码:

<canvas id="canvas" ></canvas>
<script>
    var lineChartData = {
        labels: ['Oct 2018', 'Jan 2019', 'Apr 2019', 'Jul 2019', 'Oct 2019'],
        datasets: [
            {
                label: 'Oranges',
                borderColor: window.chartColors.blue,
                backgroundColor: window.chartColors.blue,
                fill: false,
                data: 
                [
                    {y: 30, x: 'Jan 2019'},
                    {y: 20, x: 'Apr 2019'},
                    {y: 25, x: 'Jul 2019'},
                ],              
            }           
        ]
    };

    window.onload = function() {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myLine = Chart.Line(ctx, {
            data: lineChartData,
            options: {
                responsive: true,
                hoverMode: 'index',
                stacked: false,
                scales: {
                    yAxes: [{
                        type: 'linear',
                        display: true,
                        position: 'left'
                    }],
                }
            }
        });
    };
</script>

Answer 1

基本上，答案是替换它:

[
    {y: 30, x: 'Jan 2019'},
    {y: 20, x: 'Apr 2019'},
    {y: 25, x: 'Jul 2019'},
]

有了这个:

[null, 30, 20, 25, null]