响应式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图表库

回答

相关问题