Javascript Chart.js折线图工具提示在线条不显示时显示错误的标签'；不要从第一个标签开始

我有一个简单的折线图，x轴上有5个标签：

“2018年10月”、“2019年1月”、“2019年4月”、“2019年7月”、“2019年10月”

，还有一条只有3个中间标签上的点的线

“2019年1月”、“2019年4月”、“2019年7月”

问题是，当线条数据不是从第一个标签开始时（就像在我的例子中），工具提示会在悬停时显示错误的标签。如下图所示，当我将鼠标悬停在数据点上时，工具提示将显示“2019年1月”。类似地，当我将鼠标悬停在数据点上时，工具提示将显示2019年4月。你能告诉我我错过了什么吗

代码如下：

<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>

变量lineChartData={
标签：[“2018年10月”、“2019年1月”、“2019年4月”、“2019年7月”、“2019年10月”]，
数据集：[
{
标签：“橙子”，
边框颜色：window.chartColors.blue，
背景颜色：window.chartColors.blue，
填充：假，
数据：
[
{y:30，x:'2019年1月'}，
{y:20，x:'2019年4月'}，
{y:25，x:'2019年7月'}，
],              
}           
]
};
window.onload=函数（）{
var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
window.myLine=Chart.Line（ctx{
数据：线形图表数据，
选项：{
回答：是的，
悬停模式：“索引”，
错,，
比例：{
雅克斯：[{
类型：'线性'，
显示：对，
位置：'左'
}],
}
}
});
};

Chart.js

不喜欢日期标签作为字符串。您应该使用或对象来指定日期

---

使用MomentJS，您的图形可以如下所示：

const newDate=（mdy）=>时刻（mdy，“MM-DD-YYYY”）；
变量lineChartData={
标签：[newDate（'9-1-2018'）、newDate（'1-1-2019'）、newDate（'4-1-2019'）、newDate（'6-1-2019'）、newDate（'9-1-2019'）]，
数据集：[{
标签：“橙子”，
边框颜色：“蓝色”，
背景颜色：“橙色”，
填充：假，
数据：[
{y:30，x:newDate（'1-1-2019'）}，
{y:20，x:newDate（'4-1-2019'）}，
{y:25，x:newDate（'6-1-2019'）}
],
}]
};
window.onload=函数（）{
var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
window.myLine=Chart.Line（ctx{
数据：线形图表数据，
选项：{
悬停：{
模式：“新模式”
},
回答：是的，
悬停模式：“索引”，
错,，
比例：{
雅克斯：[{
类型：'线性'，
显示：对，
位置：'左'
}],
xAxes：[{
键入：“时间”，
时间：{
显示格式：{
'毫秒'：'MMM-YY'，
“第二个”：“嗯，YY”，
“分钟”：“嗯，YY”，
‘hour’：‘MMM-YY’，
“day”：“MMM-YY”，
“周”：“嗯，YY”，
“月”：“嗯-年”，
'季度'：'嗯-年'，
“年”：“嗯，年”，
}
}
}]
}
}
});
};
基本上，答案是替换这个：

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

为此：

[null, 30, 20, 25, null]

嘿@0stone0，不幸的是，这对我没有帮助，因为标签应该保持其提供的方式。不过我很感激你的回答。请参阅my，查看我是如何在不更改标签的情况下实现这一点的。@gdrt请参阅我的编辑，这样您可以保留问题中显示的数据。你的答案使用了分开的标签和数据，这很好，但在处理大型数据集时，我总是使用数据作为值/标签，以使其更清晰。很高兴你找到了解决办法；）