Highcharts.js 无法在光滑的滑块内工作

Question

working at first

then it breaks

我在 slick carousal 中使用高 charts.js，它仅适用于第一个实例，它隐藏聊天，然后在第三个实例中再次显示。

            Highcharts.chart('pie7', {
                series: [{
                        data: [{
                                name: 'Chrome',
                                y: 61.41,
                                sliced: true,
                                selected: true
                            }, {
                                name: 'Internet Explorer',
                                y: 11.84
                            }, {
                                name: 'Other',
                                y: 7.05
                            }]
                    }]
            });


                           $('.chartslick').slick({
                   dots: false,
                   slidesToShow: 6,
                   slidesToScroll: 1,
                   autoplay: true,
                   autoplaySpeed: 2000,
               });

示例

https://jsfiddle.net/v6s0nbhu/4/

Answer 1

infinite:true 的问题。将其更改为 false 并检查。

          $('.chartslick').slick({
               dots: false,
               slidesToShow: 6,
               slidesToScroll: 1,
               autoplay: true,
               autoplaySpeed: 2000,
               infinite: false
           });

您已为图表添加了 ID。 infinite 是复制所有没有 id 的滑块。所以 hightchart 无法在第二步初始化。

你需要使用infinite false或者把饼图id改成class

Rendering HighCharts to class instead of id?