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();
    });

将鼠标悬停在图表大小后，图表大小不会改变

2 个答案: