簡體   English   中英

如何使甜甜圈谷歌圖表在 div 內響應?

[英]How to make the donut google chart responsive inside div?

我有三張水平卡片,每張卡片寬度為 (33.3%)。我想在我的第一張卡片中添加這個甜甜圈圖,但是當我添加時,該圖沒有響應屬性。我們怎樣才能做出響應?

 google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart(document.getElementById('donutchart')); chart.draw(data, options); }
 <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> </head> <body> <div id="donutchart" style="width: 900px; height: 500px;"></div> </body> </html>

您必須在調整大小時重新繪制圖表...

window.addEventListener('resize', function () {
  chart.draw(data, options);
});

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM