Swiper. js не может отобразить серию «Apex-Chart» при пролистывании между (с первого на последнее) или (с последнего на первое) слайдом - PullRequest
Новая
       55

Swiper. js не может отобразить серию «Apex-Chart» при пролистывании между (с первого на последнее) или (с последнего на первое) слайдом

0 голосов
/ 30 марта 2020

Я сталкиваюсь с неизвестной проблемой только тогда, когда я перемещаюсь между последним (swiper-slide) и первым (swiper-slide) и таким же, как первым и последним, но когда я делаю только половину пролистывания, тогда RedialBar выглядит хорошо.

Я установил l oop: true . У меня есть 3 слайда. Внутри слайда у меня есть очень простая APEX RadialBar / Circle Chart. Все работает хорошо. Но когда я сдвигаюсь с 1 по 2 Хорошо. От 2 до 3 Хорошо. Но когда я сдвигаю 3 к 1, серия RadialBar не рендерится. И та же проблема, когда я делаю слайды с 1 по 3. Так что, если я просто сделаю половину слайда (просто слегка проведя пальцем), то RadialBar прекрасно отрисовывается. 

$(document).ready(function () {
    //initialize swiper when document ready
    var mySwiper = new Swiper ('.swiper-container', {
        // Optional parameters
        direction: 'horizontal',
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
            clickable: true
        },
        effect: 'slide'
    })
   
    mySwiper.on('slideChange', function () {
        console.log('slide changed');
      });
});

// Apex Chart
let options = {
    series: [50],
    chart: {
    height: 200,
    type: 'radialBar',
        },
            plotOptions: {
                radialBar: {
                    hollow: {
                    size: '70%',
                }
            },
    },
    
    stroke: {
        lineCap: 'round'
      },
    labels: ['Country'],
};

let chart = new ApexCharts(
    document.querySelector("#demo-chart-1"),options
);
let chart2 = new ApexCharts(
    document.querySelector("#demo-chart-2"),options
);
let chart3 = new ApexCharts(
    document.querySelector("#demo-chart-3"),options
);
chart.render();
chart2.render();
chart3.render();
body {
  background-color: #a3d5d3;
}
.india,
.canada,
.japan {
  height: 100;
  border: 1px solid green;
  display: grid;
  place-items: center;
}
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- Slide 1-->
    <div class="swiper-slide">
      <section class="india">
        <p class="gas-header">INDIA</p>
        <div id="demo-chart-1"></div>
      </section>
    </div>
    <!-- Slide 2-->
    <div class="swiper-slide">
      <section class="canada">
        <p class="gas-header">CANADA</p>
        <div id="demo-chart-2"></div>
      </section>
    </div>
    <!-- Slide 3-->  
    <div class="swiper-slide">
      <section class="japan">
        <p class="gas-header">JAPAN</p>
        <div id="demo-chart-3"></div>
      </section>
    </div>

  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>
</div>
...