ユーザーがChart.jsライブラリの凡例にカーソルを合わせたときにツールチップを表示する方法を見つけようとしています。私はいくつかの問題を見つけましたが、どれも解決されませんでした。
https://github.com/chartjs/Chart.js/issues/4023Chart.js- 凡例にカーソルを合わせるとツールチップが表示されます
誰かがそれを管理する方法を知っていますか？ありがとうございました
これは、onHoverコールバックを使用すると非常に簡単です。
以下は大まかな実装のスニペットですが、必要な手法を示しています。
let hovering = false,
tooltip = document.getElementById("tooltip"),
tooltips = ["such tooltip", "blah blah"],
mychart = new Chart(document.getElementById("chart"), {
type: "bar",
data: {
labels: ['a', 'b', 'c'],
datasets: [{
label: "series 1",
data: [1, 2, 3]
}, {
label: "series 2",
data: [1, 2, 3]
}]
},
options: {
legend: {
onHover: function(event, legendItem) {
if (hovering) {
return;
}
hovering = true;
tooltip.innerHTML = tooltips[legendItem.datasetIndex];
tooltip.style.left = event.x + "px";
tooltip.style.top = event.y + "px";
},
onLeave: function() {
hovering = false;
tooltip.innerHTML = "";
}
}
}
});#tooltip {
background-color: #000;
color: #fff;
position: absolute;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="chart"></canvas>
<div id="tooltip"></div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加