如何禁用ChartJS中特定数据集的工具提示
我显示了一个包含两种类型的图表。 现在我想隐藏一个数据集的工具栏。 我在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 + ' %'; } } } } });
如何为折线图隐藏工具提示？ 正如您在代码中看到的，我已经尝试插入属性“tooltip”，但这不起作用。
正如您已经总结的那样，没有办法将chart.js配置为开箱即用，只显示特定数据集的工具提示。 但是，您可以使用插件界面创建可以提供此function的插件。
这是我为您的场景创建的插件，您可以配置要显示工具提示的数据集。
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; } } } } });
使用新插件后，您现在可以在名为onlyShowForDatasetIndex的tooltips配置中使用新属性，该属性接受工具提示应显示的数据集索引数组。
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属性中数据集的位置。
看看这个codepen看看这个实际操作。 请注意，工具提示仅显示在条形图上，而不显示在行上（因为我们未在新配置属性中包含此数据集）。
在数据集声明中，您可以将参数传递给确定hover事件的命中半径（ pointHitRadius ）的每个数据集。 如果将此值设置为0，则会阻止工具提示启动。
noTipDataset = { label: "No Tooltips here", data: ..., pointHitRadius: 0, ...The rest of your data declaration here }
PS：这适用于chartJS V2.6，但我还没有进一步测试版本