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

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

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

2fjabf4q

2fjabf4q1#

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

  1. tooltips: {
  2. filter: function (tooltipItem) {
  3. return tooltipItem.datasetIndex === 0;
  4. }
  5. }
acruukt9

acruukt92#

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

  1. noTipDataset = {
  2. label: "No Tooltips here",
  3. data: ...,
  4. pointHitRadius: 0,
  5. ...The rest of your data declaration here
  6. }

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

nue99wik

nue99wik3#

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

  1. Chart.plugins.register({
  2. // need to manipulate tooltip visibility before its drawn (but after update)
  3. beforeDraw: function(chartInstance, easing) {
  4. // check and see if the plugin is active (its active if the option exists)
  5. if (chartInstance.config.options.tooltips.onlyShowForDatasetIndex) {
  6. // get the plugin configuration
  7. var tooltipsToDisplay = chartInstance.config.options.tooltips.onlyShowForDatasetIndex;
  8. // get the active tooltip (if there is one)
  9. var active = chartInstance.tooltip._active || [];
  10. // only manipulate the tooltip if its just about to be drawn
  11. if (active.length > 0) {
  12. // first check if the tooltip relates to a dataset index we don't want to show
  13. if (tooltipsToDisplay.indexOf(active[0]._datasetIndex) === -1) {
  14. // we don't want to show this tooltip so set it's opacity back to 0
  15. // which causes the tooltip draw method to do nothing
  16. chartInstance.tooltip._model.opacity = 0;
  17. }
  18. }
  19. }
  20. }
  21. });

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

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

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

展开查看全部
r6hnlfcb

r6hnlfcb4#

您可以使用此筛选器:

  1. tooltips: {
  2. filter: function (tooltipItem, data) {
  3. var datasetLabel = data.datasets[tooltipItem.datasetIndex];
  4. var datapointLabel = data.labels[tooltipItem.index];
  5. var datapointValue = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
  6. //you can also use tooltipItem.xlabel or ylabel to get datapoint label and value but here it depends on you chart orientation
  7. if (datasetLabel=="production" && datapointLabel=="red" && datapointValue<30) {
  8. return false;
  9. } else {
  10. return true;
  11. }
  12. }
  13. }
uurity8g

uurity8g5#

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

  1. datasets: [
  2. {
  3. data: [...],
  4. **pointRadius: 0,**
  5. **pointHitRadius: 0,**
  6. },
  7. ]

相关问题