Larghezza di google grafico

Question

Ho il seguente codice per creategoogle classifiche:

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); 

Nella documentazione per il diagramma a bolle, Google dice "default-width: larghezza dell'elemento contenente". Ho questo contenitore:

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

con

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

Ma quando ho creato il grafico, in Firebug vedo che Googlechart creato questi elementi:

<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"> 
     ...... 

Perché il primo div creato ha quel valore per altezza e larghezza ??

Answer 1

Hai una larghezza nelle opzioni di GoogleChart? Qualcosa di simile a questo:

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

È possibile forzare qui la dimensione del grafico. Non so se funziona con%.

Answer 2

ho risolto utilizzando .. http://codepen.io/shoogledesigns/pen/BfLkA

Ci sono direttive 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> 

e al codice 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

ho avuto un problema simile con il ridimensionamento della finestra. La mia soluzione:

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

Answer 4

Esempio:

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); 
    } 

Ma una cosa importante: se il caricamento dei grafici sta andando nella zona nascosta, per esempio in schede - dimensioni cadono sempre a 400x200, in modo da tenerlo in mente. In tal caso, per l'inizializzazione corretta dei grafici, utilizzare il primo clic su tale scheda OPPURE qualsiasi pulsante speciale con l'azione "drawChart1" ...