如何在ChartJS中禁用特定数据集的工具提示

omjgkv6w  于 2022-11-06  发布在  Chart.js
关注(0)|答案(5)|浏览(200)

我显示了一个包含两种类型的图表。现在我想隐藏一个数据集的工具栏。我在GitHub上看到了类似的讨论,但这并不能让我更深入。
下面是我的图表示例:
第一个
如何隐藏折线图的工具提示?正如您在代码中看到的,我已经尝试插入属性“tooltip”,但这不起作用。

2fjabf4q

2fjabf4q1#

现在有一种方法可以配置charj来实现这一点;请使用filter属性:

tooltips: {
    filter: function (tooltipItem) {
        return tooltipItem.datasetIndex === 0;
    }
}
acruukt9

acruukt92#

在数据集声明中,您可以将一个参数传递给每个数据集,以确定悬停事件的命中半径(pointHitRadius)。如果您将此参数设置为0,则将阻止工具提示启动。

noTipDataset = {
    label: "No Tooltips here",
    data: ...,
    pointHitRadius: 0,
    ...The rest of your data declaration here
}

PS:这在chartJS V2.6中有效,但我还没有测试过更早的版本

nue99wik

nue99wik3#

正如您已经得出的结论,没有一种方法可以将chart.js配置为只显示特定数据集的工具提示,但是,您可以使用插件接口创建一个插件来提供此功能。
这是我为您的场景创建的一个插件,它允许您配置要为哪些数据集显示工具提示。

Chart.plugins.register({
  // need to manipulate tooltip visibility before its drawn (but after update)
  beforeDraw: function(chartInstance, easing) {
    // check and see if the plugin is active (its active if the option exists)
    if (chartInstance.config.options.tooltips.onlyShowForDatasetIndex) {
      // get the plugin configuration
      var tooltipsToDisplay = chartInstance.config.options.tooltips.onlyShowForDatasetIndex;

      // get the active tooltip (if there is one)
      var active = chartInstance.tooltip._active || [];

      // only manipulate the tooltip if its just about to be drawn
      if (active.length > 0) {
        // first check if the tooltip relates to a dataset index we don't want to show
        if (tooltipsToDisplay.indexOf(active[0]._datasetIndex) === -1) {
          // we don't want to show this tooltip so set it's opacity back to 0
          // which causes the tooltip draw method to do nothing
          chartInstance.tooltip._model.opacity = 0;
        }
      }
    }
  }
});

有了这个新插件,现在可以在tooltips配置中使用一个名为onlyShowForDatasetIndex的新属性,它接受一个数据集索引数组,工具提示将为该数组显示索引。

tooltips: {
  enabled: true,
  mode: 'single',
  // new property from our plugin
  // configure with an array of datasetIndexes that the tooltip should display for
  // to get the datasetIndex, just use it's position in the dataset [] above in the data property
  onlyShowForDatasetIndex: [0, 1],
  callbacks: {
    label: function(tooltipItems, data) {
      return data.datasets[tooltipItems.datasetIndex].label + ': ' + tooltipItems.yLabel + ' %';
    }
  }
}

其中,索引值Map到datasets属性中数据集的位置。
请注意,工具提示只显示在条形图上,而不显示在折线图上(因为我们没有在新的配置属性中包含此数据集)。

r6hnlfcb

r6hnlfcb4#

您可以使用此筛选器:

tooltips: {
        filter: function (tooltipItem, data) {
             var datasetLabel = data.datasets[tooltipItem.datasetIndex];
             var datapointLabel = data.labels[tooltipItem.index];
             var datapointValue = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];

              //you can also use tooltipItem.xlabel or ylabel to get datapoint label and value but here it depends on you chart orientation                

              if (datasetLabel=="production" && datapointLabel=="red" && datapointValue<30) {
                   return false;
              } else {
                   return true;
              }
        }
 }
uurity8g

uurity8g5#

我唯一能让它工作的方法(v3.6.1)是将pointRadiuspointHitRadius都设置为零。这也从该数据集的图表中删除了点,但在我的情况下,这也是我想要的。

datasets: [
  {
    data: [...],
  **pointRadius: 0,**
  **pointHitRadius: 0,**
  },
]

相关问题