javascript - bootstrap 轮播内的剑道图表

Question

我对旋转木马内的剑道图有疑问。 在这个例子中: http://dojo.telerik.com/ExoqI 您可以看到，当轮播更改幻灯片时，Kendo 图表不会重新绘制自身。

有人知道如何解决吗？

我还尝试了这个逻辑，检查当前轮播索引，如果它是图表元素之前的索引，则执行逻辑:

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