圖上的數據事件綁定

Question

默認情況下，圖表顯示2001-2002的數據;我想知道當用戶將鼠標懸停在圖表上時，它將顯示2002-2003的數據。一旦圖表不在圖表中，它應該回到默認階段。

//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); 

這裏是的jsfiddle：https://jsfiddle.net/epvg86qu/1/

Answer 1

總結圖表容器e.g div裏面，然後把鼠標懸停並進行事件對股利。然後更改圖表的數據源

<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>