Моррис. js неверный рендеринг в слайд-шоу w3 css - PullRequest
Новая
       35

Моррис. js неверный рендеринг в слайд-шоу w3 css

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

Я пытаюсь сделать слайд-шоу из 2 Morris. js диаграмм с w3 css слайд-шоу.
(я использовал это: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots и заменил изображения на 2 карты Морриса. js с жестко закодированными данными)
первая диаграмма нарисована правильно, но вторая каким-то образом обрезана.
Я пытался хранить диаграммы Морриса в локальных переменных и перерисовывать диаграммы при смене слайда, но все равно не повезло.
Есть идеи, что я делаю не так? 

<div class="w3-content" style="max-width:800px">
    <div class="mySlides" id="graph1" style="width:100%"></div>
    <div class="mySlides" id="graph2" style="width:100%"></div>
</div>

<div class="w3-center">
  <div class="w3-section">
    <button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ Prev</button>
    <button class="w3-button w3-light-grey" onclick="plusDivs(1)">Next ❯</button>
  </div>
  <button class="w3-button demo" onclick="currentDiv(1)">1</button> 
  <button class="w3-button demo" onclick="currentDiv(2)">2</button> 
</div>

<script>

Morris.Line({
  element: 'graph1',
  data: week_data,
  xkey: 'period',
  ykeys: ['licensed'],
  labels: ['Licensed']
});
Morris.Line({
  element: 'graph2',
  data: week_data,
  xkey: 'period',
  ykeys: ['licensed'],
  labels: ['Licensed']
});
</script>

</body>
</html>

Кажется, я не могу вставить весь html, поэтому остальную часть кода можно найти здесь:
https://jsfiddle.net/d5p16q2z/1/

1 Ответ

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

Возможно, вам нужно изменить ширину элемента SVG. Когда у меня возникают такие проблемы, я делаю что-то вроде этого: 

$('#graph1 svg').width($('div.mySlides').width());
...