[英]Kendo Chart inside bootstrap carousel
I have a question about kendo chart inside carousel. 我对轮播中的剑道图表有疑问。 In this example: http://dojo.telerik.com/ExoqI you can see that Kendo chart doesn't redriwe itself when carousel changes slide.
在此示例中: http ://dojo.telerik.com/Exoq我可以看到,当轮播更改滑动时,剑道图不会重新调整自身。
Does anyone has idea how to solve it? 有人知道如何解决吗?
I also try this logic where I check current carousel index and if it is index before chart element then do the logic: 我还会在检查当前轮播索引的地方尝试以下逻辑,如果它是图表元素之前的索引,请执行以下逻辑:
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();
}
}
);
but then the problem is when you go first left with left carousel-control, the chart is not redrawn properly. 但是问题是当您首先使用左轮播控件左移时,图表无法正确重绘。
Any idea how to fix this problem is appriciated :)Thanks! 任何想法如何解决此问题都适用:)谢谢!
The Bootstrap carousel slide.bs event returns a relatedTarget telling you which item is loading next. Bootstrap传送带slide.bs事件返回relatedTarget,告诉您接下来要加载哪个项目。 You could use that to check for a particular chart DIV and then redraw that DIV's chart:
您可以使用它来检查特定的图表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);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.