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

2022-01-22 00:00:00 jquery javascript chart.js

我显示了一个包含两种类型的图表.现在我想隐藏一个数据集的工具栏.我在 GitHub 上看到了一些这样的讨论，但这并没有让我更进一步.

I displaying a chart where two types are included. Now I want to hide the toolbar for one dataset. I saw some discussion like this on GitHub, but this doesn't bring me further.

这是我的图表示例:

Chart.defaults.global.legend.display = false;
var ctx = document.getElementById("chart").getContext("2d");
var data = {
  labels: ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],
  datasets: [
     {
       label: "Test",
       type: 'bar',
       backgroundColor: "#F29220",
       borderColor: "#F29220",
       data: [4,1,1,2,2,2,2,2,2,2,2,1]
     },
     {
       label: "Test2",
       type: 'bar',
       backgroundColor: "#F29220",
       borderColor: "#F29220",
       data: [4,0,0,0,0,0,0,0,0,0,0,0]
     },
     {
       label: "",
       type: 'line',
       fillColor: "rgba(220,220,220,0)",
       pointColor: "rgba(220,220,220,0)",
       borderColor: "#FF0000",
       tooltip: false,
       data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
     }]
  };
  var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
       scales: {
          xAxes: [{
             stacked: true,
             ticks: {
                fontColor: '#000',
             }
          }],
          yAxes: [{
             stacked: true,
             ticks: {
                beginAtZero: true,
                fontColor: '#000',
                callback: function(label, index, labels) {
                   return label + '%';
                }
             },
          }]
       },
       elements: {
          point:{
             radius: 0
          }
       },
       tooltips: {
          enabled: true,
          mode: 'single',
          callbacks: {
             label: function(tooltipItems, data) {
                 return data.datasets[tooltipItems.datasetIndex].label + ': ' + tooltipItems.yLabel + ' %';
          }
       }
    }
 }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart" width="740" height="370"></canvas>

如何隐藏折线图的工具提示?正如您在代码中看到的，我已经尝试插入属性工具提示"，但这不起作用.

How can I hide the tooltip just for the line chart? As you can see in the code, I already tried to insert the attribute "tooltip", but this doesn't work.

推荐答案

正如您已经得出的结论，没有办法将 chart.js 配置为仅显示特定数据集的工具提示.但是，您可以使用 插件接口 创建一个插件，提供此功能.

As you already concluded, there isn't a way to configure chart.js out of the box to only show tooltips of specific datasets. However, you can use the plugin interface to create a plugin that can provide this functionality.

这是我为您的场景创建的插件，可让您配置要显示工具提示的数据集.

Here is a plugin that I created for your scenario that let's you configure which datasets you want the tooltip to display for.

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 的新属性，该属性接受工具提示应显示的数据集索引数组.

With the new plugin in place, you can now use a new property in the tooltips config called onlyShowForDatasetIndex that accepts an array of dataset indexes that the tooltip should display for.

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 + ' %';
    }
  }
}

datasets 属性中索引值映射到数据集位置的位置.

Where the index value maps to the position of the dataset in the datasets property.

看看这个 codepen 看看它的实际效果.请注意，工具提示仅显示在条形图上，而不是线条上(因为我们没有在新配置属性中包含此数据集).

Take a look at this codepen to see this in action. Notice the tooltips only show on the bar charts but not the line (since we did not include this dataset in the new configuration property).

相关文章