我显示了一个包含两种类型的图表。现在我想隐藏一个数据集的工具栏。我在GitHub上看到了类似的讨论,但这并不能让我更深入。下面是我的图表示例:第一个如何隐藏折线图的工具提示?正如您在代码中看到的,我已经尝试插入属性“tooltip”,但这不起作用。
2fjabf4q1#
现在有一种方法可以配置charj来实现这一点;请使用filter属性:
tooltips: { filter: function (tooltipItem) { return tooltipItem.datasetIndex === 0; }}
tooltips: {
filter: function (tooltipItem) {
return tooltipItem.datasetIndex === 0;
}
acruukt92#
在数据集声明中,您可以将一个参数传递给每个数据集,以确定悬停事件的命中半径(pointHitRadius)。如果您将此参数设置为0,则将阻止工具提示启动。
pointHitRadius
noTipDataset = { label: "No Tooltips here", data: ..., pointHitRadius: 0, ...The rest of your data declaration here}
noTipDataset = {
label: "No Tooltips here",
data: ...,
pointHitRadius: 0,
...The rest of your data declaration here
PS:这在chartJS V2.6中有效,但我还没有测试过更早的版本
nue99wik3#
正如您已经得出的结论,没有一种方法可以将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; } } } }});
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
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 + ' %'; } }}
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 + ' %';
其中,索引值Map到datasets属性中数据集的位置。请注意,工具提示只显示在条形图上,而不显示在折线图上(因为我们没有在新的配置属性中包含此数据集)。
datasets
r6hnlfcb4#
您可以使用此筛选器:
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; } } }
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;
uurity8g5#
我唯一能让它工作的方法(v3.6.1)是将pointRadius和pointHitRadius都设置为零。这也从该数据集的图表中删除了点,但在我的情况下,这也是我想要的。
pointRadius
datasets: [ { data: [...], **pointRadius: 0,** **pointHitRadius: 0,** },]
datasets: [
{
data: [...],
**pointRadius: 0,**
**pointHitRadius: 0,**
},
]
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
都设置为零。这也从该数据集的图表中删除了点,但在我的情况下,这也是我想要的。