Javascript 图表上的数据事件绑定

默认情况下，图表显示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);

---

以下是JSFIDLE:

将图表包装在容器中，例如

div

，然后在该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>

//你的图表在这里
var isHover=假；
$（“#图表容器”）。悬停(
函数（）{
如果（！isHover）{
var图表=$（“#图表”）.data（）.kendoChart；
图表.dataSource.data（seriesData2）；
isHover=true；
}
}，函数（）{
如果（结束）{
var图表=$（“#图表”）.data（）.kendoChart；
图表.dataSource.data（seriesData）；
isHover=false；
}
});

将图表包装在容器中，例如

div

，然后在该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>

//你的图表在这里
var isHover=假；
$（“#图表容器”）。悬停(
函数（）{
如果（！isHover）{
var图表=$（“#图表”）.data（）.kendoChart；
图表.dataSource.data（seriesData2）；
isHover=true；
}
}，函数（）{
如果（结束）{
var图表=$（“#图表”）.data（）.kendoChart；
图表.dataSource.data（seriesData）；
isHover=false；
}
});

谢谢@Dion Dirza。下面是JSFIDLE演示，它有时是响应的，有时不是。顺便问一下，当鼠标只在直方图条上时，有没有办法更新图表。代码只是为了更好的响应而更新的。关于你的最后一个问题，我把它留给你研究。。你试过什么了？再次非常感谢兄弟）如果你不介意的话，请检查以下与此问题相关的问题，谢谢@Dion Dirza。下面是JSFIDLE演示，它有时是响应的，有时不是。顺便问一下，当鼠标只在直方图条上时，有没有办法更新图表。代码只是为了更好的响应而更新的。关于你的最后一个问题，我把它留给你研究。。你试过什么了？再次非常感谢兄弟）如果你不介意的话，你能检查一下与这个问题相关的下列问题吗