Chart.js / ng2-charts：悬停时的活动图表元素

Question

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

示例：

Example image

Stackblitz

选项：

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

我尝试了 interactions 和 interaction mode 配置的不同组合，但无法完全达到您的要求。您所描述的和您提供的图像是分组条形图（imo）的预期行为。

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

选项对象

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