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

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

第一种是设置包含它的元素的大小。图表将默认为包含元素（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乘500px。

假设您不想这样，您的新选项将是：

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

Answer 2

因此，设置jmac答案中的高度和宽度是有效的，但是如果你想要它响应，还有一些我需要做的事情。

但是，为了支持我在第一位遇到这个问题的原因是：当页面加载时，此图表显示的div 不可见。

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

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

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

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

这不会处理调整大小的窗口。

Google图表默认大小

2 个答案: