Google图表默认大小

Question

我的Google图表设置为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>

Answer 1

有几种方法可以设置图表的大小.

第一种是设置包含它的元素的大小.图表将默认为包含元素的宽度和高度(有关高度/宽度的默认值,请参阅Google Visualization文档).

第二个是不定义元素的实际大小,而是通过将这些元素添加到您的选项中,将每个图表的高度/宽度设置为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
};