Chart.js-当光标移动到主画布之外时禁用工具提示

Question

我有一个折线图，我设置了类似的工具提示

options: {
tooltips:{
mode: 'x',
intersect: false,
callbacks: {
footer: function(tooltipItem, data) {
return 'some text'
}
}
},    
}

它运行良好。我遇到的问题是，当我将光标移动到主绘图/画布之外的x轴刻度时，工具提示仍然会出现。我曾尝试设置intersect: true，但只有当我将鼠标直接悬停在点上时，工具提示才会显示。理想情况下，我希望工具提示在我悬停在垂直网格线上时显示(发生在intersect:false时(，但在光标移动到主画布之外时不显示。有可能吗？

Fiddle：https://jsfiddle.net/dqdqdq/yp47oL9t/47/

Answer 1

您可以使用选项中的onHover回调来检查鼠标是否在chartArea中，如果是，则将工具提示设置为启用或禁用工具提示。

您可能还想检查您设置的值是否已经是正确的值，因为这将节省大量不必要的更新

示例(V2(：

const updateTooltipShow = (chart, enabled) => {
chart.options.tooltips.enabled = enabled;
chart.update();
}
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1, 2, 3, 4],
datasets: [{
data: [1, 2, 3, 4],
backgroundColor: "rgba(153,255,51,0.6)"
},
]
},
options: {
onHover: function(e, activeElements) {
const {
bottom,
top,
right,
left
} = this.chartArea;
if (e.x >= left && e.x <= right && e.y <= bottom && e.y >= top) {
updateTooltipShow(this, true)
} else {
updateTooltipShow(this, false)
}
},
tooltips: {
mode: 'x',
intersect: false,
callbacks: {
footer: function(tooltipItem, data) {
return 'some text'
}
}
},
}
});

<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

示例(V3(：

const updateTooltipShow = (chart, enabled) => {
chart.options.plugins.tooltip.enabled = enabled;
chart.update();
}
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [1, 2, 3, 4],
datasets: [{
data: [1, 2, 3, 4],
backgroundColor: "rgba(153,255,51,0.6)"
},
]
},
options: {
onHover: (e, activeElements, chart) => {
const {
bottom,
top,
right,
left
} = chart.chartArea;
if (e.x >= left && e.x <= right && e.y <= bottom && e.y >= top) {
updateTooltipShow(chart, true)
} else {
updateTooltipShow(chart, false)
}
},
plugins: {
tooltip: {
mode: 'x',
intersect: false,
callbacks: {
footer: function(tooltipItem, data) {
return 'some text'
}
}
},
}
}
});

<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>

Answer 2

我写了一个简单的插件，用于在将光标移出主画布时隐藏标题：

plugins: [{
id: "toolbarHider",
afterEvent: (chart: any, evt: any, opts: any) => {
const { left, right, bottom, top } = chart.chartArea;
const e = evt.event;
const status = e.x >= left && e.x <= right && e.y <= bottom && e.y >= top;
if (status !== chart.options.plugins.tooltip.enabled) {
chart.options.plugins.tooltip.enabled = status;
chart.update();
}
}
}]

更多关于Chart.js插件的信息。