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说＆＃34;默认宽度：包含元素的宽度＆＃34;。我有这个容器：

<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

您的Google图表选项中有宽度吗？像这样：

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

你可以在这里强制图表的大小。我不知道它是否适用于％。

Answer 3

我决定使用.. 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();
});

谷歌图表的宽度

3 个答案: