图表.js / ng2-图表:悬停时的活动图表元素

Question

我正在制作基于时间数据(x 轴(和数据点(y 轴(的条形图。如果我将鼠标悬停在其中一个图表元素上，我希望只有悬停在上面的图表元素才会处于活动状态。但是，几个图表元素变为活动状态。

例子：

示例图像

斯塔克闪电战

选项：

{
"scales": {
"xAxes": [
{
"type": "time",
"distribution": "linear",
"time": {
"tooltipFormat": "YYYY-MM-DD",
"unit": "month",
"stepSize": 1,
"displayFormats": {
"month": "MM YYYY"
}
}
}
],
"yAxes": [
{
"scaleLabel": {
"display": true,
"labelString": "KEY: Gallon / month"
}
}
]
},
"responsive": true,
"legend": {
"display": true
},
"tooltips": {
"enabled": true
}
}

数据集：我添加了三次相同的数据集：

{
"data": [
{
"x": "2019-07-31T22:00:00.000Z",
"y": 92
},
{
"x": "2019-06-30T22:00:00.000Z",
"y": 163
},
{
"x": "2019-05-31T22:00:00.000Z",
"y": 185.8
},
{
"x": "2019-04-30T22:00:00.000Z",
"y": 213
},
{
"x": "2019-03-31T22:00:00.000Z",
"y": 379
},
{
"x": "2019-02-28T23:00:00.000Z",
"y": 209
},
{
"x": "2019-01-31T23:00:00.000Z",
"y": 251
},
{
"x": "2018-12-31T23:00:00.000Z",
"y": 352
},
{
"x": "2018-11-30T23:00:00.000Z",
"y": 119
},
{
"x": "2018-10-31T23:00:00.000Z",
"y": 109
},
{
"x": "2018-09-30T22:00:00.000Z",
"y": 213.6
},
{
"x": "2018-08-31T22:00:00.000Z",
"y": 220
}
],
"label": "wmb Coolant",
"type": "bar",
"backgroundColor": "rgb(0,61,143,0.2)",
"borderColor": "rgb(0,61,143)",
"hoverBackgroundColor": "rgb(0,61,143,0.8)",
"hoverBorderColor": "rgb(0,61,143)",
"order": 0
}

我必须以特定方式配置什么吗？ 非常感谢您的帮助。

Answer 1

我尝试了交互和交互模式配置的不同组合，但无法完全实现您的要求。您描述的内容和您提供的图像是分组条形图 (imo( 的预期行为。

但是，我认为提供最佳用户体验的配置(我会在自己的应用程序中使用(是将tooltips.mode设置为"索引"。将鼠标悬停在一堆条形上时，该堆栈中的所有数据点都会显示在工具提示中。

选项对象

{
...
tooltips: {
enabled: true,
mode: 'index'
}
}