Javascript 使用 Chart.js 检测图表部分上的悬停事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29287153/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detecting hover events over parts of a chart using Chart.js
提问by Hydrothermal
I've made a pie chart using Chart.js, and I'd like to detect when a segment is hovered over. I've found plenty of documentation regarding manipulating the tooltips that appear when hovering over segments, but nothing regarding doing something else when a tooltip would appear. Is this possible?
我已经使用 Chart.js 制作了一个饼图，我想检测一个段何时悬停在上面。我找到了大量有关操作悬停在段上时出现的工具提示的文档，但没有关于在出现工具提示时执行其他操作的文档。这可能吗？
采纳答案by markE
No...
不...
There's nothing in the ChartJS API to override or extend the tooltip,
ChartJS API 中没有任何内容可以覆盖或扩展工具提示，
But, a workaround...
但是，一个解决方法......
You can modify the drawmethod of the Chart.Tooltipclass. This would allow you to "do something else" when the tooltip would normally be rendered by ChartJS.
您可以修改类的draw方法Chart.Tooltip。当工具提示通常由 ChartJS 呈现时，这将允许您“做其他事情”。
The draw method you want to tie into starts at line 1351 of the source here:
您要绑定的 draw 方法从此处源代码的第 1351 行开始：
https://github.com/nnnick/Chart.js/blob/master/src/Chart.Core.js
https://github.com/nnnick/Chart.js/blob/master/src/Chart.Core.js
回答by Quince
I know this has already been given an accepted answer, and im not sure if this does satisfy your use case but Chart js released an update (maybe a month ago or so) that allowed for custom tooltips. This allows for a custom function to run when a tooltip would normally have been drawn. They have an example in the samples section of git hub
我知道这已经给出了一个可接受的答案，我不确定这是否满足您的用例，但 Chart js 发布了一个更新（可能大约一个月前），允许自定义工具提示。这允许在通常绘制工具提示时运行自定义函数。他们在 git hub 的示例部分有一个示例
in short you define a custom function
总之你定义一个自定义函数
Chart.defaults.global.customTooltips = function(tooltip){//do what you want}
here is the example they give in the samples with an extra bit of text added to an html tooltip. The only annoying thing I see is that don't provide the segment/point/bar that triggered this tooltip which would be really handy as then you could do some thing to the graph knowing this information but you are given the tooltip data which means you can do something with that instead.
这是他们在示例中给出的示例，在 html 工具提示中添加了一些额外的文本。我看到的唯一令人讨厌的事情是不提供触发此工具提示的段/点/条，这会非常方便，因为这样您就可以在知道此信息的情况下对图表做一些事情，但您会获得工具提示数据，这意味着您可以用它做一些事情。
Chart.defaults.global.customTooltips = function (tooltip) {
// Tooltip Element
var tooltipEl = $('#chartjs-tooltip');
// Hide if no tooltip
if (!tooltip) {
tooltipEl.css({
opacity: 0
});
return;
}
// Set caret Position
tooltipEl.removeClass('above below');
tooltipEl.addClass(tooltip.yAlign);
// Set Text
tooltipEl.html(tooltip.text+ " anythign custom you want");
// Find Y Location on page
var top;
if (tooltip.yAlign == 'above') {
top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
} else {
top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
}
// Display, position, and set styles for font
tooltipEl.css({
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsetTop + top + 'px',
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle,
});
};
var pieData = [{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Red"
}, {
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
}, {
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}, {
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
}, {
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}];
var ctx1 = document.getElementById("chart-area1").getContext("2d");
window.myPie = new Chart(ctx1).Pie(pieData);
var ctx2 = document.getElementById("chart-area2").getContext("2d");
window.myPie = new Chart(ctx2).Pie(pieData);#canvas-holder {
width: 100%;
margin-top: 50px;
text-align: center;
}
#chartjs-tooltip {
opacity: 1;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
padding: 3px;
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.below {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#chartjs-tooltip.below:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0, 0, 0, .8) transparent;
border-width: 0 8px 8px 8px;
bottom: 1em;
content:"";
display: block;
left: 50%;
position: absolute;
z-index: 99;
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
}
#chartjs-tooltip.above {
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
}
#chartjs-tooltip.above:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0, 0, 0, .8) transparent;
border-width: 8px 8px 0 8px;
bottom: 1em;
content:"";
display: block;
left: 50%;
top: 100%;
position: absolute;
z-index: 99;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}<script src="https://raw.githack.com/chartjs/Chart.js/v1.1.1/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas-holder">
<canvas id="chart-area1" width="50" height="50" />
</div>
<div id="canvas-holder">
<canvas id="chart-area2" width="300" height="300" />
</div>
<div id="chartjs-tooltip"></div>回答by Artesea
The way I'm doing it is slightly more simple:
assuming you already have some code defining the canvas like
canvas = document.getElementById("chart");and your pie chart is
window.myPie. You can use the onmousemove javascript event, or jQuery hover
我这样做的方式稍微简单一点：假设您已经有了一些定义画布的代码，
canvas = document.getElementById("chart");并且您的饼图是
window.myPie. 您可以使用 onmousemove javascript 事件，或 jQuery 悬停
canvas.onmousemove = function(evt) {
var el = window.myPie.getElementsAtEvent(evt);
//do something with the el object to display other information
//elsewhere on the page
}
In my case highlight a table row based on the value of el[0]._index
在我的情况下，突出显示基于值的表行 el[0]._index
回答by drinor
For v2.0 version:
对于 v2.0 版本：
Chart.defaults.global.hover.onHover = function(x) {
if(x[0]) {
var index = x[0]._index;
// Place here your code
}
};
回答by Simon Adler
If found a small trick using customTooltip, too. I searched for a solution to get an Event if the user moves with the mouse over a Value and a Tooltip is shown. Mainly i liked to present in a different frame some detail informations besides the raw Plot values.
如果使用 customTooltip 也发现了一个小技巧。如果用户将鼠标移到值上并显示工具提示，我搜索了一个解决方案来获取事件。主要是我喜欢在不同的框架中呈现除原始 Plot 值之外的一些详细信息。
var options = {
customTooltips: function (tooltip)
{
if (!tooltip) return;
tooltip.custom = false;
tooltip.draw();
OnEntrySelected(tooltip.title);
tooltip.custom = this;
}
}
The custom tooltip is drawn using tooltip.draw(), but this calls the custom method. I set it to false to avoid a recursive loop, call the default behavior and take the data i need for my callback (OnEntrySelected) which is in this case the string of the x-Axis label. This event is triggered whenever the tooltip is shown.
自定义工具提示是使用 tooltip.draw() 绘制的，但这会调用自定义方法。我将它设置为 false 以避免递归循环，调用默认行为并获取我的回调（OnEntrySelected）所需的数据，在这种情况下是 x 轴标签的字符串。每当显示工具提示时都会触发此事件。
