Question

我对旋转木马内的剑道图有疑问。在这个例子中： http://dojo.telerik.com/ExoqI 你可以看到，当旋转木马改变幻灯片时，剑道图表并没有重新发布。

有谁知道如何解决它？

我也尝试这个逻辑，我检查当前的轮播索引，如果它是图表元素之前的索引，那么做逻辑：

 let currentCarouselIndex = $('#myCarousel div.active').index();
            console.log(currentCarouselIndex)
            if (currentCarouselIndex == 1){ //next slide will be chartanalysis chart
              setTimeout(function(){
                    let chart = $("#chart").data("kendoChart");
                    chart.redraw();
                },50);
                $("#myCarousel").off();
            }
          }
        );

但问题是当你第一次左转左旋转控制时，图表没有正确重绘。

任何想法如何解决这个问题都是适当的：）谢谢！

Answer 1

Bootstrap carousel slide.bs事件返回一个relatedTarget，告诉您下一个要加载的项目。您可以使用它来检查特定的图表DIV，然后重新绘制DIV的图表：

   $("#myCarousel").on('slide.bs.carousel', function (e) {
     var IsChart = $(e.relatedTarget).find("#chart").length > 0;
     var IsChart2 = $(e.relatedTarget).find("#chart1").length > 0;
     if (IsChart){
      setTimeout(function () {
        let chart = $("#chart").data("kendoChart");
        chart.redraw();
      }, 50);       
     }
     if (IsChart2){
      setTimeout(function () {
        let chart1 = $("#chart1").data("kendoChart");
        chart1.redraw();
      }, 50);       
     }
  });

<强> DEMO

剑道图里面的bootstrap轮播

1 个答案: