Javascript Morris.js在w3css幻灯片中呈现不正确

我正在尝试用w3css幻灯片制作2张Morris.js图表的幻灯片。
（我使用了这个：用2个Morris.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>

❮ 上
下一个❯
1.
2.
莫里斯线({
元素：“graph1”，
数据：周数据，
xkey:'期间'，
ykeys:[“授权”]，
标签：[“许可”]
});
莫里斯线({
元素：“graph2”，
数据：周数据，
xkey:'期间'，
ykeys:[“授权”]，
标签：[“许可”]
});

似乎我无法粘贴整个html，因此，其余代码可以在此处找到：

---

您可能需要调整SVG元素的宽度。当我遇到这样的问题时，我会这样做：

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