Chiều rộng của google biểu đồ

Question

Tôi có đoạn code sau để creategoogle bảng xếp hạng:

google.load("visualization", "1", {packages:["corechart"]}); 
var options = { 
     .... 
     }; 
var data = google.visualization.arrayToDataTable([ 
     ... 
     ]); 
var chart = new google.visualization.BubbleChart(document.getElementById('consumer_s1')); 
chart.draw(data, options); 

Trong tài liệu cho BubbleChart, Google cho biết "mặc định chiều rộng: chiều rộng của phần tử có chứa". Tôi có chứa này:

<div class="responsive" id="consumer_s1"> 

với

.responsive{ 
    height: 100%; 
    width: 100%; 
} 

Nhưng khi tôi tạo ra bảng xếp hạng, trong Firebug Tôi thấy rằng Googlechart tạo các yếu tố:

<div style="position: relative; width: 400px; height: 200px;" dir="ltr"> 
    <div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;" aria-label="Un grafico."> 
    <svg width="400" height="200" style="overflow: hidden;" aria-label="Un grafico." aria-hidden="true"> 
     ...... 

Tại sao div đầu tiên tạo có giá trị đó cho chiều cao và chiều rộng ??

Answer 1

Bạn có chiều rộng trong các tùy chọn GoogleChart của mình? Một cái gì đó như thế này:

var options = { 
    ... 
    width: 400, 
    height: 200, 
    ... 
}; 

Bạn có thể buộc ở đây kích thước biểu đồ. Tôi không biết nếu nó hoạt động với%.

Answer 2

tôi giải quyết bằng .. http://codepen.io/shoogledesigns/pen/BfLkA

Có các chỉ thị html:

<div class="grid"> 
<div class="col-1-2"> 
<div id="chart_div1" class="chart"></div> 
</div> 
<div class="col-1-2"> 
<div id="chart_div2" class="chart"></div> 
</div> 
</div> 

Và mã js:

google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart1); 
function drawChart1() { 
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', 
    hAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
}; 

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1')); 
    chart.draw(data, options); 
} 

google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart2); 
function drawChart2() { 
    var data = google.visualization.arrayToDataTable([ 
['Year', 'Sales', 'Expenses'], 
['2013', 1000,  400], 
['2014', 1170,  460], 
['2015', 660,  1120], 
['2016', 1030,  540] 
]); 

var options = { 
    title: 'Company Performance', 
    hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, 
    vAxis: {minValue: 0} 
}; 

var chart = new google.visualization.AreaChart(document.getElementById('chart_div2')); 
chart.draw(data, options); 
} 

$(window).resize(function(){ 
    drawChart1(); 
    drawChart2(); 
}); 

Answer 3

Tôi đã có một vấn đề tương tự với cửa sổ thay đổi kích thước. sửa chữa của tôi:

var container = document.getElementById("consumer_s1").firstChild.firstChild; 
container.style.width = "100%"; 

Answer 4

Ví dụ:

function drawChart1() { 

     // Create the data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Topping'); 
     data.addColumn('number', 'Slices'); 
     data.addRows([ 
      ['Mushrooms', 3], 
      ['Onions', 1], 
      ['Olives', 1], 
      ['Zucchini', 1], 
      ['Pepperoni', 2] 
     ]); 

     // Set chart options 
     var options = { 
      'title': 'How Much Pizza I Ate Last Night', 
      'width': 800, 
      'height': 600, 
      chartArea: {left: 0, top: 0, width: "100%", height: "100%"} 
     }; 

     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
    } 

NHƯNG quan trọng điều: nếu tải của bảng xếp hạng đang diễn ra trong khu vực ẩn, ví dụ như trong các tab - kích thước luôn rơi xuống 400x200, vì vậy giữ cho nó trong tâm trí. Trong trường hợp như vậy để khởi tạo đúng biểu đồ, hãy sử dụng lần nhấp đầu tiên trên tab đó HOẶC bất kỳ nút đặc biệt nào có hành động "drawChart1" ...