我使用ChartJs (ver: 2.8.0)来渲染线型图，并使用了 自定义工具提示，将在 click 点的事件。
问题是当鼠标指针移动到图表画布区域之外时，自定义的工具提示不会隐藏。
为了使工具提示只在点的点击事件中可见，在图表选项中，我使图表只在点击事件中响应。
options: {
events: ['click'],
.....
..
请告诉我以上的方法是否正确，在点击事件上显示工具提示，而不是任何其他事件。
这样一来，当鼠标在图表画布区域外移动（或点击）时，默认的图表js工具提示和自定义工具提示都不会自行隐藏。
谁能帮我解决这个问题？
下面是 链接到我的JS Fiddle实例
以下是我的完整代码。
JS:
var lineChartCustomTooltip = function (tooltip) {
// Tooltip Element
var tooltipEl = document.getElementById("chartjs-tooltip");
if (!tooltipEl) {
tooltipEl = document.createElement("div");
tooltipEl.id = "chartjs-tooltip";
tooltipEl.innerHTML = "<table></table>";
this._chart.canvas.parentNode.appendChild(tooltipEl);
}
// Hide if no tooltip
if (tooltip.opacity === 0) {
tooltipEl.style.opacity = 0;
return;
}
// Set caret Position
tooltipEl.classList.remove("above", "below", "no-transform");
if (tooltip.yAlign) {
tooltipEl.classList.add(tooltip.yAlign);
} else {
tooltipEl.classList.add("no-transform");
}
function getBody(bodyItem) {
return bodyItem.lines;
}
// Set Text
if (tooltip.body) {
var titleLines = tooltip.title || [];
var bodyLines = tooltip.body.map(getBody);
var innerHtml = "<thead>";
titleLines.forEach(function (title) {
innerHtml += "<tr><th>" + title + "</th></tr>";
});
innerHtml += "</thead><tbody>";
bodyLines.forEach(function (body, i) {
var colors = tooltip.labelColors[i];
var style = "background:" + colors.backgroundColor;
style += "; border-color:" + colors.borderColor;
style += "; border-width: 2px";
var span =
'<span class="chartjs-tooltip-key" style="' + style + '"></span>';
innerHtml += "<tr><td>" + span + body + "</td></tr>";
});
innerHtml += "</tbody>";
var tableRoot = tooltipEl.querySelector("table");
tableRoot.innerHTML = innerHtml;
}
var positionY = this._chart.canvas.offsetTop;
var positionX = this._chart.canvas.offsetLeft;
// Display, position, and set styles for font
tooltipEl.style.opacity = 1;
tooltipEl.style.left = positionX + tooltip.caretX + "px";
tooltipEl.style.top = positionY + tooltip.caretY + "px";
tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
tooltipEl.style.fontSize = tooltip.bodyFontSize + "px";
tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
tooltipEl.style.padding = tooltip.yPadding + "px " + tooltip.xPadding + "px";
};
var options = {
type: "line",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: "# of Votes",
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
borderColor: "red",
pointBackgroundColor: "red",
},
{
label: "# of Points",
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
borderColor: "blue",
pointBackgroundColor: "blue",
},
],
},
options: {
events: ["click"],
tooltips: {
enabled: false, // disable the default tooltip
custom: lineChartCustomTooltip, // use the custom tooltip
},
scales: {
yAxes: [
{
ticks: {
reverse: false,
},
},
],
},
title: {
display: true,
text: "Chart.js Line Chart - Custom Tooltips",
},
},
};
var ctx = document.getElementById("chartJSContainer").getContext("2d");
new Chart(ctx, options);
HTML: HTML:
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
CSS:
canvas { background-color : #eee;
}
#chartJSContainer {
border: 1px solid;
}
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
#chartjs-tooltip {
opacity: 1;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.chartjs-tooltip-key {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 10px;
}
我找到了解决方案！只需添加 mouseout 事件到图表上 events 选项，我把它解决了。
现在，当鼠标移动或点击到图表区域外时，自定义添加的工具提示会隐藏起来。
代码是这样的。
options: {
events: ["click", "mouseout"],
....
...
下面是... 链接到我更新的JS Fiddel例子。