cartjs工具提示显示在图表上的错误位置 [英] cartjs tooltips displays in the wrong place on a chart
本文介绍了cartjs工具提示显示在图表上的错误位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我刚刚将工具提示：{模式：'索引'，相交：true} 添加到此特定
所以我将鼠标悬停在图表上的特定点上，但工具提示显示在完全不同的位置。
有什么想法要解决吗？
解决方案
从示例代码您在对第一个答案的评论中提供的信息，我发现您的数据集的值不在同一x位置开始。因此模式：'index'不起作用，您应该使用> $code> mode： x 。
工具提示：{
模式：'x'
}
请查看您的适应代码：
const data = [{name： series1，series：[{ date： 2015-02-28T00：00：00.000Z， value：4946}，{ date： 2015-03- 31T00：00：00.000Z，值：7174}，{日期： 2015-04-30T00：00：00.000Z，值：6981}，{日期： 2015-05- 31T00：00：00.000Z，值：9461}，{日期： 2015-06-30T00：00：00.000Z，值：13387}，{日期： 2015-07- 31T00：00：00.000Z，值：24302}，{日期： 2015-08-31T00：0 0：00.000Z， value：9994}，{ date： 2015-09-30T00：00：00.000Z， value：14999}，{ date： 2015-10-31T00： 00：00.000Z，值：17700}，{日期： 2015-11-30T00：00：00.000Z，值：50822}，{日期： 2015-12-31T00： 00：00.000Z，值：50919}，{日期： 2016-01-31T00：00：00.000Z，值：48754}，{日期： 2016-02-29T00： 00：00.000Z，值：29803}，{日期： 2016-03-31T00：00：00.000Z，值：67236}，{日期： 2016-04-30T00： 00：00.000Z，值：96319}，{日期： 2016-05-31T00：00：00.000Z，值：124185}，{日期： 2016-06-30T00： 00：00.000Z，值：141557}，{日期： 2016-07-31T00：00：00.000Z，值：132527}，{日期： 2016-08-31T00： 00：00.000Z，值：140417}，{日期： 2016-09-30T00：00：00.000Z，值：135075}，{日期： 2016-10-31T00： 00：00.000Z，值：191392}，{日期： 2016-11-30T00：00：00.000Z，值：227628}，{日期： 2 016-12-31T00：00：00.000Z，值：243538}，{日期： 2017-01-31T00：00：00.000Z，值：293096}，{日期： 2017-02-28T00：00：00.000Z，值：345766}，{日期： 2017-03-31T00：00：00.000Z，值：519761}，{日期： 2017-04-30T00：00：00.000Z，值：448786}，{日期： 2017-05-31T00：00：00.000Z，值：572362}，{日期： 2017-06-30T00：00：00.000Z，值：580894}，{日期： 2017-07-31T00：00：00.000Z，值：660067}，{日期： 2017-08-31T00：00：00.000Z，值：709063}，{日期： 2017-09-30T00：00：00.000Z，值：812561}，{日期： 2017-10-31T00：00：00.000Z，值：874424}，{日期： 2017-11-30T00：00：00.000Z，值：1076463}，{日期： 2017-12-31T00：00：00.000Z，值：1049066}，{日期： 2018-01-31T00：00：00.000Z，值：1239827}，{日期： 2018-02-28T00：00：00.000Z，值：1081402}，{日期： 2018-03-31T00：00：00.000Z，值 ：1556783}，{ date： 2018-04-30T00：00：00.000Z， value：1443372}，{ date： 2018-05-31T00：00：00.000Z， value ：1491657}，{ date： 2018-06-30T00：00：00.000Z， value：1606459}，{ date： 2018-07-31T00：00：00.000Z， value ：1814560}，{ date： 2018-08-31T00：00：00.000Z， value：2231426}，{ date： 2018-09-30T00：00：00.000Z， value ：2199441}，{ date： 2018-10-31T00：00：00.000Z， value：2752529}，{ date： 2018-11-30T00：00：00.000Z， value ：2849511}，{ date： 2018-12-31T00：00：00.000Z， value：2902949}，{ date： 2019-01-31T00：00：00.000Z， value ：3373373}，{日期： 2019-02-28T00：00：00.000Z，值：3369580}，{日期： 2019-03-31T00：00：00.000Z，值 ：4114746}，{日期： 2019-04-30T00：00：00.000Z，值：4097378}，{日期： 2019-05-31T00：00：00.000Z，值 ：4232173}，{ date： 2019-06-30T00：00：00.000Z， value：3995196}，{ date ： 2019-07-31T00：00：00.000Z，值：4589346}，{日期： 2019-08-31T00：00：00.000Z，值：4575779}，{日期 ： 2019-09-30T00：00：00.000Z，值：4556959}，{日期： 2019-10-31T00：00：00.000Z，值：5275366}，{日期 ： 2019-11-30T00：00：00.000Z，值：5433849}，{日期： 2019-12-31T00：00：00.000Z，值：4935529}，{日期 ： 2020-01-29T00：00：00.000Z，值：4764600}]}，{名称： series2，系列：[{ date： 2016-10-31T00：00：00.000Z ， value：648388}，{ date： 2016-11-30T00：00：00.000Z， value：693729}，{ date： 2016-12-31T00：00：00.000Z ， value：773365}，{ date： 2017-01-31T00：00：00.000Z， value：975006}，{ date： 2017-02-28T00：00：00.000Z ， value：1082831}，{ date： 2017-03-31T00：00：00.000Z， value：1350222}，{ date： 2017-04-30T00：00：00.000Z ， value：1289953}，{ date： 2017-05-31T00：00：00.000Z， value：1499037}，{ da te： 2017-06-30T00：00：00.000Z，值：1605640}，{ date： 2017-07-31T00：00：00.000Z，值：1726461}，{ date： 2017-08-31T00：00：00.000Z， value：1853198}，{ date： 2017-09-30T00：00：00.000Z， value：1885029}，{ date： 2017-10-31T00：00：00.000Z， value：2168899}，{ date： 2017-11-30T00：00：00.000Z， value：2369837}，{ date： 2017-12-31T00：00：00.000Z， value：2118275}，{ date： 2018-01-31T00：00：00.000Z， value：2708846}，{ date： 2018-02-28T00：00：00.000Z， value：2523632}，{ date： 2018-03-31T00：00：00.000Z， value：2862202}，{ date： 2018-04-30T00：00：00.000Z， value：2618252}，{ date： 2018-05-31T00：00：00.000Z， value：3179610}，{ date： 2018-06-30T00：00：00.000Z， value：3110572}，{ date： 2018-07-31T00：00：00.000Z， value：3433279}，{日期： 2018-08-31T00：00：00.000Z，值：4107825}，{日期： 2018-09-30T00：00：00 .000Z，值：3785735}，{日期： 2018-10-31T00：00：00.000Z，值：4079134}，{日期： 2018-11-30T00：00： 00.000Z，值：4072219}，{日期： 2018-12-31T00：00：00.000Z，值：3606818}，{日期： 2019-01-31T00：00： 00.000Z，值：4512291}，{日期： 2019-02-28T00：00：00.000Z，值：4334171}，{日期： 2019-03-31T00：00： 00.000Z，值：4657378}，{日期： 2019-04-30T00：00：00.000Z，值：4633421}，{日期： 2019-05-31T00：00： 00.000Z，值：4803755}，{日期： 2019-06-30T00：00：00.000Z，值：4633593}，{日期： 2019-07-31T00：00： 00.000Z，值：5140042}，{日期： 2019-08-31T00：00：00.000Z，值：5040706}，{日期： 2019-09-30T00：00： 00.000Z，值：5256548}，{日期： 2019-10-31T00：00：00.000Z，值：5982276}，{日期： 2019-11-30T00：00： 00.000Z，值：5633371}，{日期： 2019-12-31T00：00：00.000Z，值：48922 60}，{ date： 2020-01-29T00：00：00.000Z， value：4887260}]}]];新图表（document.getElementById（'myChart'），{类型：'line'，数据：{数据集：[{标签：data [0] .name，填充：false，backgroundColor：'red'，borderColor：'red'，data：data [0] .series.map（x => （{x：new Date（x.date），y：x.value}））}，{标签：data [1] .name，fill：false，backgroundColor：'green'，borderColor：'green'，data： data [1] .series.map（x =>（{x：new Date（x.date），y：x.value}））}]}，选项：{响应：true，标题：{display：false }，图例：{display：true，位置：'top'}，工具提示：{mode：'x'}，比例尺：{xAxes：[{type：'time'，time：{unit：'month'，displayFormats： {'month'：'MMM YYYY'，}，tooltipFormat：'MMM YYYY'}}，}}}））;
< script src = https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment .min.js< / script>< script src = https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js< / script>< canvas id = myChart height = 100>< / canvas>
I just added tooltips: { mode: 'index', intersect: true } to this particular chart setup
The problem is that tooltip drops always in the wrong place
So I am hovering on a particular point on the chart but tooltip displays in completely different spot.
Any ideas how to fix?
解决方案
From the sample code you provided in your comment to my first answer, I see that the values of your datasets don't start at the same x-position. Therefore mode: 'index' doesn't work and you should use mode: 'x' instead.
tooltips: {
mode: 'x'
}
Please have a look at your adapted code:
const data = [{
name: "series1",
series: [{
"date": "2015-02-28T00:00:00.000Z",
"value": 4946
}, {
"date": "2015-03-31T00:00:00.000Z",
"value": 7174
}, {
"date": "2015-04-30T00:00:00.000Z",
"value": 6981
}, {
"date": "2015-05-31T00:00:00.000Z",
"value": 9461
}, {
"date": "2015-06-30T00:00:00.000Z",
"value": 13387
}, {
"date": "2015-07-31T00:00:00.000Z",
"value": 24302
}, {
"date": "2015-08-31T00:00:00.000Z",
"value": 9994
}, {
"date": "2015-09-30T00:00:00.000Z",
"value": 14999
}, {
"date": "2015-10-31T00:00:00.000Z",
"value": 17700
}, {
"date": "2015-11-30T00:00:00.000Z",
"value": 50822
}, {
"date": "2015-12-31T00:00:00.000Z",
"value": 50919
}, {
"date": "2016-01-31T00:00:00.000Z",
"value": 48754
}, {
"date": "2016-02-29T00:00:00.000Z",
"value": 29803
}, {
"date": "2016-03-31T00:00:00.000Z",
"value": 67236
}, {
"date": "2016-04-30T00:00:00.000Z",
"value": 96319
}, {
"date": "2016-05-31T00:00:00.000Z",
"value": 124185
}, {
"date": "2016-06-30T00:00:00.000Z",
"value": 141557
}, {
"date": "2016-07-31T00:00:00.000Z",
"value": 132527
}, {
"date": "2016-08-31T00:00:00.000Z",
"value": 140417
}, {
"date": "2016-09-30T00:00:00.000Z",
"value": 135075
}, {
"date": "2016-10-31T00:00:00.000Z",
"value": 191392
}, {
"date": "2016-11-30T00:00:00.000Z",
"value": 227628
}, {
"date": "2016-12-31T00:00:00.000Z",
"value": 243538
}, {
"date": "2017-01-31T00:00:00.000Z",
"value": 293096
}, {
"date": "2017-02-28T00:00:00.000Z",
"value": 345766
}, {
"date": "2017-03-31T00:00:00.000Z",
"value": 519761
}, {
"date": "2017-04-30T00:00:00.000Z",
"value": 448786
}, {
"date": "2017-05-31T00:00:00.000Z",
"value": 572362
}, {
"date": "2017-06-30T00:00:00.000Z",
"value": 580894
}, {
"date": "2017-07-31T00:00:00.000Z",
"value": 660067
}, {
"date": "2017-08-31T00:00:00.000Z",
"value": 709063
}, {
"date": "2017-09-30T00:00:00.000Z",
"value": 812561
}, {
"date": "2017-10-31T00:00:00.000Z",
"value": 874424
}, {
"date": "2017-11-30T00:00:00.000Z",
"value": 1076463
}, {
"date": "2017-12-31T00:00:00.000Z",
"value": 1049066
}, {
"date": "2018-01-31T00:00:00.000Z",
"value": 1239827
}, {
"date": "2018-02-28T00:00:00.000Z",
"value": 1081402
}, {
"date": "2018-03-31T00:00:00.000Z",
"value": 1556783
}, {
"date": "2018-04-30T00:00:00.000Z",
"value": 1443372
}, {
"date": "2018-05-31T00:00:00.000Z",
"value": 1491657
}, {
"date": "2018-06-30T00:00:00.000Z",
"value": 1606459
}, {
"date": "2018-07-31T00:00:00.000Z",
"value": 1814560
}, {
"date": "2018-08-31T00:00:00.000Z",
"value": 2231426
}, {
"date": "2018-09-30T00:00:00.000Z",
"value": 2199441
}, {
"date": "2018-10-31T00:00:00.000Z",
"value": 2752529
}, {
"date": "2018-11-30T00:00:00.000Z",
"value": 2849511
}, {
"date": "2018-12-31T00:00:00.000Z",
"value": 2902949
}, {
"date": "2019-01-31T00:00:00.000Z",
"value": 3373373
}, {
"date": "2019-02-28T00:00:00.000Z",
"value": 3369580
}, {
"date": "2019-03-31T00:00:00.000Z",
"value": 4114746
}, {
"date": "2019-04-30T00:00:00.000Z",
"value": 4097378
}, {
"date": "2019-05-31T00:00:00.000Z",
"value": 4232173
}, {
"date": "2019-06-30T00:00:00.000Z",
"value": 3995196
}, {
"date": "2019-07-31T00:00:00.000Z",
"value": 4589346
}, {
"date": "2019-08-31T00:00:00.000Z",
"value": 4575779
}, {
"date": "2019-09-30T00:00:00.000Z",
"value": 4556959
}, {
"date": "2019-10-31T00:00:00.000Z",
"value": 5275366
}, {
"date": "2019-11-30T00:00:00.000Z",
"value": 5433849
}, {
"date": "2019-12-31T00:00:00.000Z",
"value": 4935529
}, {
"date": "2020-01-29T00:00:00.000Z",
"value": 4764600
}]
}, {
name: "series2",
series: [{
"date": "2016-10-31T00:00:00.000Z",
"value": 648388
}, {
"date": "2016-11-30T00:00:00.000Z",
"value": 693729
}, {
"date": "2016-12-31T00:00:00.000Z",
"value": 773365
}, {
"date": "2017-01-31T00:00:00.000Z",
"value": 975006
}, {
"date": "2017-02-28T00:00:00.000Z",
"value": 1082831
}, {
"date": "2017-03-31T00:00:00.000Z",
"value": 1350222
}, {
"date": "2017-04-30T00:00:00.000Z",
"value": 1289953
}, {
"date": "2017-05-31T00:00:00.000Z",
"value": 1499037
}, {
"date": "2017-06-30T00:00:00.000Z",
"value": 1605640
}, {
"date": "2017-07-31T00:00:00.000Z",
"value": 1726461
}, {
"date": "2017-08-31T00:00:00.000Z",
"value": 1853198
}, {
"date": "2017-09-30T00:00:00.000Z",
"value": 1885029
}, {
"date": "2017-10-31T00:00:00.000Z",
"value": 2168899
}, {
"date": "2017-11-30T00:00:00.000Z",
"value": 2369837
}, {
"date": "2017-12-31T00:00:00.000Z",
"value": 2118275
}, {
"date": "2018-01-31T00:00:00.000Z",
"value": 2708846
}, {
"date": "2018-02-28T00:00:00.000Z",
"value": 2523632
}, {
"date": "2018-03-31T00:00:00.000Z",
"value": 2862202
}, {
"date": "2018-04-30T00:00:00.000Z",
"value": 2618252
}, {
"date": "2018-05-31T00:00:00.000Z",
"value": 3179610
}, {
"date": "2018-06-30T00:00:00.000Z",
"value": 3110572
}, {
"date": "2018-07-31T00:00:00.000Z",
"value": 3433279
}, {
"date": "2018-08-31T00:00:00.000Z",
"value": 4107825
}, {
"date": "2018-09-30T00:00:00.000Z",
"value": 3785735
}, {
"date": "2018-10-31T00:00:00.000Z",
"value": 4079134
}, {
"date": "2018-11-30T00:00:00.000Z",
"value": 4072219
}, {
"date": "2018-12-31T00:00:00.000Z",
"value": 3606818
}, {
"date": "2019-01-31T00:00:00.000Z",
"value": 4512291
}, {
"date": "2019-02-28T00:00:00.000Z",
"value": 4334171
}, {
"date": "2019-03-31T00:00:00.000Z",
"value": 4657378
}, {
"date": "2019-04-30T00:00:00.000Z",
"value": 4633421
}, {
"date": "2019-05-31T00:00:00.000Z",
"value": 4803755
}, {
"date": "2019-06-30T00:00:00.000Z",
"value": 4633593
}, {
"date": "2019-07-31T00:00:00.000Z",
"value": 5140042
}, {
"date": "2019-08-31T00:00:00.000Z",
"value": 5040706
}, {
"date": "2019-09-30T00:00:00.000Z",
"value": 5256548
}, {
"date": "2019-10-31T00:00:00.000Z",
"value": 5982276
}, {
"date": "2019-11-30T00:00:00.000Z",
"value": 5633371
}, {
"date": "2019-12-31T00:00:00.000Z",
"value": 4892260
}, {
"date": "2020-01-29T00:00:00.000Z",
"value": 4887260
}]
}];
new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
datasets: [
{
label: data[0].name,
fill: false,
backgroundColor: 'red',
borderColor: 'red',
data: data[0].series.map(x => ({ x: new Date(x.date), y: x.value }))
}, {
label: data[1].name,
fill: false,
backgroundColor: 'green',
borderColor: 'green',
data: data[1].series.map(x => ({ x: new Date(x.date), y: x.value }))
}
]
},
options: {
responsive: true,
title: {
display: false
},
legend: {
display: true,
position: 'top'
},
tooltips: {
mode: 'x'
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'month',
displayFormats: {
'month': 'MMM YYYY',
},
tooltipFormat: 'MMM YYYY'
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
这篇关于cartjs工具提示显示在图表上的错误位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
