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: {
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 + ' %';
}
}
}
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;
}
}
}
5条答案
按热度按时间2fjabf4q1#
现在有一种方法可以配置charj来实现这一点;请使用filter属性:
acruukt92#
在数据集声明中,您可以将一个参数传递给每个数据集,以确定悬停事件的命中半径(
pointHitRadius
)。如果您将此参数设置为0,则将阻止工具提示启动。PS:这在chartJS V2.6中有效,但我还没有测试过更早的版本
nue99wik3#
正如您已经得出的结论,没有一种方法可以将chart.js配置为只显示特定数据集的工具提示,但是,您可以使用插件接口创建一个插件来提供此功能。
这是我为您的场景创建的一个插件,它允许您配置要为哪些数据集显示工具提示。
有了这个新插件,现在可以在
tooltips
配置中使用一个名为onlyShowForDatasetIndex
的新属性,它接受一个数据集索引数组,工具提示将为该数组显示索引。其中,索引值Map到
datasets
属性中数据集的位置。请注意,工具提示只显示在条形图上,而不显示在折线图上(因为我们没有在新的配置属性中包含此数据集)。
r6hnlfcb4#
您可以使用此筛选器:
uurity8g5#
我唯一能让它工作的方法(v3.6.1)是将
pointRadius
和pointHitRadius
都设置为零。这也从该数据集的图表中删除了点,但在我的情况下,这也是我想要的。