谷歌图表的宽度

Question

我有以下代码来创建谷歌图表：

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

在 BubbleChart 的文档中，Google 说“默认宽度：包含元素的宽度”。 我有这个容器：

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

与

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

但是当我创建图表时，在 Firebug 中我看到 Googlechart 创建了这些元素：

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

为什么创建的第一个 div 的高度和宽度具有该值？？

Answer 1

例子：

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

但是一件重要的事情：如果图表的加载是在隐藏区域中进行的，例如在选项卡中 - 大小总是下降到 400x200，所以请记住这一点。在这种情况下，要正确初始化图表，请首先单击该选项卡或任何具有“drawChart1”操作的特殊按钮...

Answer 2

我在调整窗口大小时遇到​​了类似的问题。我的解决方法：

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

Answer 3

您的 GoogleChart 选项中有宽度吗？像这样的：

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

您可以在此处强制设置图表的大小。我不知道它是否适用于 %。

Answer 4

我解决了使用..http://codepen.io/shoogledesigns/pen/BfLkA

有 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>

还有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();
});