图表大小在我鼠标对它后不会改变。

Question

在下面的图表中，我希望当我鼠标超过图表的大小时，用以下代码进行更改：

var boxWidth = $("#chart").width();

    $("#chart").mouseenter(function(){
        $(this).animate({
            width: "1500"
        });


    });
  $("#chart").mouseleave(function(){
        $(this).animate({
            width: boxWidth,


        });


    });

但是，正如您所看到的，唯一的变化是背景宽度而不是图表，下面是代码片段：

https://dojo.telerik.com/onEBe

Answer 1

您需要重新初始化图表。

$("#chart").mouseenter(function() {
  if ($(this).width() != 1000) {
    $(this).animate({
      width: "1000px"
    }, function() {
      createChart();
    });
  }


});
$("#chart").mouseleave(function() {
  if ($(this).width() != boxWidth) {
    $(this).animate({
      width: boxWidth
    }, function() {
      createChart();
    });
  }
});

在这里，我检查宽度，因为在宽度变化时只需要重新创建一次图表。

更新：

而不是再次创建图表，只需刷新它，它将获得容器的宽度和高度。

$("#chart").data("kendoChart").refresh();

Answer 2

您必须再次使用createChart()才能在图表上实际执行刷新。

    $("#chart").mouseenter(function(){
        $(this).animate({
            width: "1500"
        });
        createChart();
    });