google-visualization - Google图表默认大小

Question

我有一个Google图表设置为500px x 500px，但返回400px x 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>

Answer 1

有几种设置图表大小的方法。

第一个是设置包含它的元素的大小。图表将默认为包含元素(see Google Visualization documentation for default values of height/width)的宽度和高度。

第二种是不定义元素的实际大小，而是通过将其添加到选项中来手动将图表的高度/宽度分别设置为500px:

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

您在代码中实际执行的操作是设置统计图本身的大小(而不是具有轴，标签和图例的整个统计图元素的大小)。如果您指向@ Dr.Molle在注释中指出的适当的div，这将导致图表绘图区域变为500px x 500px。

假设您不希望这样做，那么您的新选项将是:

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