[英]Morris.js not rendering correct in w3css slideshow
我正在嘗試使用 w3css 幻燈片制作 2 個 Morris.js 圖表的幻燈片。
(我使用了這個: https ://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots 並用硬編碼數據的 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>
似乎我無法粘貼整個 html,所以可以在這里找到其余的代碼:
https://jsfiddle.net/d5p16q2z/1/
您可能需要調整 SVG 元素的寬度。 當我遇到此類問題時,我會這樣做:
$('#graph1 svg').width($('div.mySlides').width());
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.