我显示一个包含两种类型的图表。现在我想隐藏一个数据集的工具栏。我在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”，但这不起作用。
答案 0 :(得分：8)
现在有a way to configure charjs to do this；只需使用filter属性：
tooltips: {
filter: function (tooltipItem) {
return tooltipItem.datasetIndex === 0;
}
}
答案 1 :(得分：3)
正如您已经总结的那样，没有办法将chart.js配置为开箱即用，只显示特定数据集的工具提示。但是，您可以使用plugin interface创建可以提供此功能的插件。
这是我为您的场景创建的插件，您可以配置要显示工具提示的数据集。
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的{{1}}配置中使用一个新属性，该属性接受工具提示应显示的数据集索引数组。
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 + ' %';
}
}
}
属性中数据集的位置。
看一下这个codepen，看看这个是怎么回事。请注意，工具提示仅显示在条形图上，而不显示在行上（因为我们未在新配置属性中包含此数据集）。
答案 2 :(得分：1)
在数据集声明中，您可以向每个数据集传递参数，该参数确定悬停事件的命中半径（pointHitRadius）。如果将其设置为0，将阻止启动工具提示。
noTipDataset = {
label: "No Tooltips here",
data: ...,
pointHitRadius: 0,
...The rest of your data declaration here
}
PS：这在chartJS V2.6中有效，但是我还没有进一步测试版本
答案 3 :(得分：0)
您可以使用此过滤器：
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;
}
}
}