谷歌图表的宽度

Question

我有以下代码来创建Google图表:

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说"default-width:包含元素的宽度".我有这个容器:

<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

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

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

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