響應式Google可視化JavaScript圖表庫

嗨大家好，我正在做一個關於Google分析的項目，希望得到您的一些幫助。響應式Google可視化JavaScript圖表庫

我在Google Visualization JavaScript Library中製作了一個Google分析數據圖表，我想製作一個WordPress插件。我一直堅持讓圖形響應。此外，我使用bootstrap使我的頁面響應，但div的我已經在其中顯示我的圖表是響應，但我沒有使我的圖表響應。 Google的圖表庫是否具有響應能力？其次，我已將div的寬度設置爲100％，但對我無幫助。請幫助我使圖表反應靈敏。

但它不幫助我。有什麼方法可以使圖表響應。我正在使用Google可視化JavaScript庫。

<html> 
<head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
     ['Year', 'Sales', 'Expenses'], 
     ['2004', 1000,  400], 
     ['2005', 1170,  460], 
     ['2006', 660,  1120], 
     ['2007', 1030,  540] 
     ]); 

    var options = { 
     title: 'Company Performance', 
     vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
    }; 

    var chart = new google.visualization.BarChart(document.getElementById('visualization')); 
    chart.draw(data, options); 
    } 
</script> 


</head> 
<body> 
<div id="chart_div" style="width:'100%'; height: 500px;"></div> 

</body> 
</html>

來源

2013-12-15 Uzi Balooch

make的圖表響應，你需要從調整大小事件再次打電話給你「drawChart」功能。

<script> 

    function drawChart(){ 
    .......chart data e.g ----- 
    } 

    $(document).ready(function() { 
     $(window).resize(function(){ 
      drawMap(); 
     }); 
    }); 
</script>

fiddle

來源

2014-06-26 09:25:43 user2082431

我被卡在了同樣的問題，但後來我意識到，即使在調整大小的瀏覽器窗口中的圖表不調整他們仍然敏感，只要你的DIV響應。

嘗試將窗口大小調整爲較低分辨率並刷新瀏覽器，您將看到圖表如何自動適合您的div。

雖然看着你的代碼，我不認爲你的「char_div」是完全響應，你不應該設置高度像素值，如果你想它是響應。您可以將其設置爲「自動」，也可以將寬度設置爲「100％」而不指定高度。

希望我能以某種方式幫助:)

來源

2014-01-10 22:35:01 Andoni

響應式Google可視化JavaScript圖表庫

回答

相關問題