问题
As a default, chart shows data for 2001-2002 ; I would like to know when user hover the mouse on the chart it will show data for 2002-2003. Once mouser is out of the chart then it should go back to default stage.
//The first data comes from 2001-2002
var seriesData = [{
year: "2000",
sold: 100,
produced: 200
}, {
year: "2001",
sold: 250,
produced: 280
}];
// The second dataset comes from 2002-2003
var seriesData2 = [{
year: "2002",
sold: 140,
produced: 240
}, {
year: "2004",
sold: 350,
produced: 380
}];
function createChart() {
$("#chart").kendoChart({
dataSource: {
data: seriesData
},
series: [{
name: "Sold",
field: "sold"
}, {
name: "Producted",
field: "produced"
}],
categoryAxis: {
field: "year"
},
});
}
$(document)
.ready(createChart);
Here is the jsfiddle: https://jsfiddle.net/epvg86qu/1/
回答1:
Wrap your chart inside a container e.g div
, then put a mouseover and out event on that div. Then change the datasource of chart
<div id="chart-container">
//your chart here
</div>
<script type="text/javascript">
var isHover = false;
$("#chart-container").hover(
function () {
if (!isHover) {
var chart = $("#chart").data().kendoChart;
chart.dataSource.data(seriesData2);
isHover = true;
}
}, function () {
if (isHover) {
var chart = $("#chart").data().kendoChart;
chart.dataSource.data(seriesData);
isHover = false;
}
});
</script>
来源:https://stackoverflow.com/questions/30158228/data-event-binding-on-chart