折线图中的鼠标悬停或单击事件 [英] Mouse Hover or Click Event in Line Chart
本文介绍了折线图中的鼠标悬停或单击事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当用户将鼠标悬停在#chart
上时,将绘制第二个数据.
When user hovers the mouse on the #chart
, then second data is drawn.
但是我想知道用户何时将鼠标悬停在第一条数据线上而不是#chart上,然后绘制第二条数据线.
However I would like to know when user hovers the mouse on the first data line by itself not #chart then second data line is drawn.
function createChart() {
$("#chart")
.kendoChart({
xAxis: {},
yAxis: {},
seriesDefaults: {type: "scatterLine" },
series: [{data: stats2},{name:"gmail"}],
})
}
var isHover = false;
$("#chart").hover(
function () {
if (!isHover) {
var chart = $("#chart").data().kendoChart;
chart.options.series[0].data = stats2;
chart.options.series[0].name="yahoo";
chart.redraw();
isHover = true;
}
}, function () {
if (isHover) {
var chart = $("#chart").data().kendoChart;
chart.options.series[0].data = stats;
chart.options.series[0].name="";
chart.redraw();
isHover = false;
}
});
http://jsfiddle.net/epvg86qu/12/
推荐答案
在createChart中添加此内容(并将函数替换为所需的行为).此示例仅向控制台写入"hello".
Add this within createChart (and replace the function with your desired behavior). This example just writes "hello" to the console.
function createChart() {
$("#chart")
.kendoChart({
xAxis: {},
yAxis: {},
seriesDefaults: {type: "scatterLine" },
series: [{data: stats2},{name:"gmail"}],
seriesHover: function(e) {
console.log("hello");
}
})
}
这篇关于折线图中的鼠标悬停或单击事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文