google biểu đồ trực quan, kích thước theo tỷ lệ

Question

Làm thế nào để bạn thiết lập kích thước của một biểu đồ google theo tỷ lệ: Tôi có điều này trong html:

<div id="chart_div" width="90%" height="20%"></div> 

và không có chiều rộng cũng như chiều cao trong các tùy chọn trong js.

Nhưng kích thước biểu đồ không thích ứng với chế độ xem.

Cảm ơn

Answer 1

Thứ nhất, phong cách sử dụng để thiết lập kích thước của bạn, chứ không phải thuộc tính:

<div id="chart_div" style="width: 90%; height: 20%;"></div> 

Biểu đồ sẽ vẽ với kích thước của div theo mặc định, nhưng các bảng xếp hạng không phải là đáp ứng. Bạn cần phải treo một "thay đổi kích thước" xử lý sự kiện cho cửa sổ (hoặc thành phần khác nếu bạn đang thay đổi kích thước trong một cửa sổ) mà vẽ lại bảng xếp hạng:

function resizeChart() { 
    chart.draw(data, options); 
} 
if (document.addEventListener) { 
    window.addEventListener('resize', resizeChart); 
} 
else if (document.attachEvent) { 
    window.attachEvent('onresize', resizeChart); 
} 
else { 
    window.resize = resizeChart; 
} 

Answer 2

Google khuyên phong cách bạn, giống như câu trả lời ở trên, với đúng CSS và điều này làm cho một biểu đồ ít ổn định hơn. Tuy nhiên, bạn có thể kích thước nó lên trong Javascript ...
https://developers.google.com/chart/interactive/docs/basic_customizing_chart
Vì vậy, đối với các tùy chọn khi bạn vẽ biểu đồ (sử dụng chart.draw(data, options) như trên) ...

var options = { 
    width:400, 
    height:300 
} 

Một fiddle tốt cho một responsive design là ở đây ...
http://jsfiddle.net/toddlevy/pyAz5/

Answer 3

$(window).resize(function(){ 
    var container = document.getElementById("chart_div").firstChild.firstChild; 
    container.style.width = "100%"; 

    chart.draw(data, options); 
}); 

Answer 4

bằng cách nhân với hệ số thích hợp để $ (window) .width() hoặc $ (wi ndow) .height() trong tùy chọn biểu đồ

var options = { 
     width: $(window).width(), 
     height: $(window).height()*0.75 
};