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

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

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

选项对象

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

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

1 个答案: