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

Question

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

这是我的图表的示例：

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>

如何隐藏仅用于折线图的工具提示？正如您在代码中看到的那样，我已经尝试插入属性“ tooltip”，但这是行不通的。

Answer 1

现在有一种方法可以配置charjs来做到这一点；只需使用filter属性：

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

Answer 2

正如您已经得出的结论，没有一种方法可以开箱即用地配置 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 + ' %';
    }
  }
}

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

看看这个代码笔，看看它的实际效果。请注意，工具提示仅显示在条形图上，而不显示在线条上（因为我们没有将此数据集包含在新的配置属性中）。

Answer 3

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

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

PS：这适用于chartJS V2.6，但我还没有进一步测试版本