Highcharts.js не работает внутри скользящего слайдера

Question

сначала работает

потом ломается

Я использую high charts.js внутри гладкой карусели, и она работает только для 1-го экземпляра, скрывает чат и затем снова показывает в третьем.

            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 на class

Рендеринг HighCharts в класс вместо id?