Google visualization 谷歌图表默认大小

我有一个谷歌图表，设置为500px乘以500px，但返回400px乘以200px。我看过div，它显示500x500。我没有理由解释为什么图表会回到400x200。div显示500x500，但SVG矩形框显示400x200，使所有图像都变小

有我不知道的背景吗

<div class="span5">
<div id="qual_div" style="border:1px black solid;margin:0px;padding:0px;height:500px;width:500px"></div>
</div>
    <script type="text/javascript">
  var data, options, chart;
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    data = google.visualization.arrayToDataTable([
      ['Qual', 'Stat'],
      ['Patient Satisfaction',     {{ $stats->attributes['sa_ptsatisfaction'] }}],
      ['Medical Knowledge',      {{ $stats->attributes['sa_medknowledge'] }}],
      ['ER Procedural Skills',  {{ $stats->attributes['sa_erprocskills'] }}],
      ['Nurse Relationship Skills', {{ $stats->attributes['sa_nrsrltnshpskls'] }}],
      ['Speed',    {{ $stats->attributes['sa_speed'] }}],
      ['Compassion',    {{ $stats->attributes['sa_compassion'] }}],
      ['EMR Utilization Skills',    {{ $stats->attributes['sa_emr'] }}],
      ['Profession Teamwork Skills',    {{ $stats->attributes['sa_proftmwrkskills'] }}]
    ]);

    options = {
      title: 'My Daily Activities'
      ,chartArea:{left:0,top:0,width:"100%",height:"100%"}
    };

    chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

  function adjustChart(nm, vl) {
    for (var r=0; r<data.D.length; r++) {
      if (data.D[r].c[0].v == nm) {
        data.D[r].c[1].v = parseInt(vl);
        break;
      }
    }
    chart.draw(data, options);
  }
</script>

var数据、期权、图表；
load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
data=google.visualization.arrayToDataTable([
['Qual'，'Stat']，
[‘患者满意度’，{{$stats->attributes['saptsuccessment']}]，
['Medical Knowledge'，{{$stats->attributes['sa_medknowledge']}}，
['ER程序性技能'，{{$stats->attributes['sa_erprocskills']}]，
['Nurse Relationship Skills'，{{$stats->attributes['sa_nrsrltnshpskls']}}，
['Speed'，{{$stats->attributes['sau Speed']}}，
['sau慈悲'，{{$stats->attributes['sau慈悲']}}，
['EMR利用技能'，{{$stats->attributes['sau_EMR']}]，
[‘专业团队合作技能’，{{$stats->attributes['sa_proftmwrkskills']}]
]);
选项={
标题：“我的日常活动”
，图表区：{左：0，上：0，宽：“100%”，高：“100%”
};
chart=新的google.visualization.PieChart（document.getElementById（'chart_div'）；
图表绘制（数据、选项）；
}
功能调整表（nm，vl）{
对于（var r=0；r，有几种方法可以设置图表的大小

第一个是设置包含它的元素的大小。图表将默认为包含它的元素的宽度和高度（）

第二种方法是不定义元素的实际大小，而是将图表的高度/宽度手动设置为500px，方法是将这些值添加到选项中：

options = {
  title: 'My Daily Activities'
  ,chartArea:{left:0,top:0,width:"100%",height:"100%"}
  ,height: 500
  ,width: 500
};

您在代码中实际做的是设置图表打印本身的大小（而不是带有轴、标签和图例的整个图表元素的大小）。如果您指向@Dr.Molle在注释中指出的相应div，这将导致图表打印区域变为500px×500px

假设你不想这样，你的新选择是：

options = {
  title: 'My Daily Activities'
  ,height: 500
  ,width: 500
};

因此，在jmac的答案中设置高度和宽度是可行的，但是如果您希望它具有响应性，我还需要做一些额外的事情

但是，让我再说一次，我出现这个问题的第一个原因是：
加载页面时，此图表显示的div不可见

如图所示，隐藏的图表宽度错误400 x 200:jsfiddle.net/muc7ejn3/6/

如图所示，隐藏的图表宽度是正确的：jsfiddle.net/muc7ejn3/7/

另一种方法是在调用Chart.draw（）之前取消隐藏图表，然后再次隐藏它，类似于：

tempShowChart();
chart.draw(view, options);
hideChartAgain();

这不会处理窗口的大小调整。
代码中的div不是绘制图表的div（它是#qual#u div），您确定#chart_div的大小为500x500。对于我来说，您的代码与500x500 div配合良好，大小将正确应用于svgIf。下面的答案对您有效，请单击答案中向上/向下投票箭头下方的复选标记，以便其他人可以看到这解决了您的问题。如果我的答案不清楚，请单击eno呃，或者如果您仍然有问题，请在回答中添加一条注释，解释该问题是什么/什么不清楚。但这将如何反映窗口大小调整？默认情况下，我的garphs以400X200像素显示。我不想在选项中设置宽度/高度，因为它可能超出窗口大小调整的范围。我如何处理此问题？@Shivaji_Vidhale宽度问题有什么解决方案吗？这是一个答案还是另一个问题？这是一个关于为什么谷歌图表显示为400px×200px的问题的答案。我觉得接受的答案不够好，因为它迫使你指定一个固定的像素宽度和高度。我的解决方案是，你可以在div上指定50%的宽度，它将进行调整，或者使用bootstrap列和它将调整等。。。