在窗口中重新調整Google圖表的大小

Question

請幫助我如何在Windows重新調整大小時自動重新調整谷歌圖表的大小。

謝謝

這裏是一些代碼..

<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([ 
       ['Day', 'Open ticket', 'Closed ticket'], 
       ['Day 1', 10, 400], 
       ['Day 2', 170, 460], 
       ['Day 3', 60, 1120], 
       ['Day 4', 30, 540], 
      ]); 
      var options = { 
       title: 'DAILY GRAPH', 
       hAxis: {title: 'NOVEMBER', titleTextStyle: {color: '#333'}}, 
       vAxis: {minValue: 0} 
      }; 
      var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
      chart.draw(data, options); 
     } 
    </script> 

Answer 1

這裏有一種方法：

添加此事件處理程序：

window.onresize = drawChart; 

然後立足圖表的寬度和高度上窗戶寬度和高度的百分比：

var width = .4 * window.innerHeight; 
    var height = .4 * window.innerWidth; 

    var options = { 
     title: 'DAILY GRAPH', 
     width: width, 
     height: height, 
     hAxis: { title: 'NOVEMBER', titleTextStyle: { color: '#333' } }, 
     vAxis: { minValue: 0 } 
    }; 

Answer 2

可以具有width和height百分比限定在head截面，例如：

<style> 
    #chart_div { 
     width: 80%; 
     height: 100%; 
    } 
</style> 

和窗口的大小調整添加事件偵聽器，以drawChart()方法的末尾：

... 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 

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

見example at jsbin