如何禁用多图图形上其中一个图上的工具提示,而保留其他图。
我试图在不需要工具提示的情节上将'showToolTip'设置为false,但这不起作用。
let ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'scatter',
data :{
labels : cLabels,
datasets : [{
label: 'Points',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
pointStyle: 'circle',
pointRadius: 10,
data : cData,
showTooltips: false, //<- THis line does not work, and there is a global property to remove all tooltips
order: 2,
},{
label: '',
backgroundColor: 'rgb(255, 255, 255)',
borderColor: 'rgb(255, 255, 255)',
pointStyle: 'circle',
pointRadius: 5,
data : cData,
order: 1,
},{
最佳答案
您可以使用tooltip filter callback函数。如果显示工具提示,则返回true
,否则返回false
。下面的示例指定仅对第一个数据集显示工具提示。
options: {
...
tooltips: {
filter: tooltipItem => tooltipItem.datasetIndex == 0
}
请查看下面的可运行代码示例。
const data = [
{
series: [
{date: '2020-01', value: 5 },
{date: '2020-02', value: 20 },
{date: '2020-03', value: 10 },
{date: '2020-04', value: 15 }
]
},
{
series: [
{date: '2020-01', value: 10 },
{date: '2020-02', value: 8 },
{date: '2020-03', value: 16 },
{date: '2020-04', value: 12 }
]
}
];
new Chart(document.getElementById('canvas'), {
type: 'line',
data: {
datasets: [{
label: data[0].name,
fill: false,
backgroundColor: 'red',
borderColor: 'red',
data: data[0].series.map(x => ({ x: new Date(x.date), y: x.value }))
}, {
label: data[1].name,
fill: false,
backgroundColor: 'blue',
borderColor: 'blue',
data: data[1].series.map(x => ({ x: new Date(x.date), y: x.value }))
}]
},
options: {
responsive: true,
title: {
display: false
},
legend: {
display: false
},
tooltips: {
filter: tooltipItem => tooltipItem.datasetIndex == 0
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'month',
displayFormats: {
'month': 'MMM YYYY',
},
tooltipFormat: 'MMM YYYY'
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas" height="90"></canvas>