21

我有一个 Google 图表，设置为 500 像素 x 500 像素，但返回 400 像素 x 200 像素。我查看了 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>
4

3 回答 3

42

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

首先是设置包含它的元素的大小。图表将默认为包含元素的宽度和高度（有关高度/宽度的默认值，请参阅 Google 可视化文档）。

第二个是不定义元素的实际大小，而是通过将这些添加到您的选项中手动将图表的高度/宽度设置为 500 像素：

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

您在代码中实际所做的是设置图表本身的大小（而不是带有轴、标签和图例的整个图表元素的大小）。如果您指向 @Dr.Molle 在评论中指出的适当 div，这将导致图表绘图区域变为 500 像素 x 500 像素。

假设您不希望这样，您的新选择将是：

options = {
  title: 'My Daily Activities'
  ,height: 500
  ,width: 500
};
于 2013-01-15T00:05:43.437 回答
0

我有同样的情况，渲染图的大小为 400 x 200px

渲染后，svg 被包裹在 3 个 div 中

<div id="gantt-chart" class="svelte-ql38wl">

  <div style="position: relative; width: 400px; height: 200px;">

    <div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">

      <svg width="400" height="200"><defs></defs><g><rect x="0" y="0" width="400" height="200" fill="#ffffff"></svg>

    </div>
  </div>
</div>
  1. 拥有图表的容器集 = new google.visualization.Gantt(document.getElementById( 'gantt-chart' ));
  2. 生成的外包装 div - 宽度和高度集 > 在哪里？似乎与 svg 大小同步
  3. 生成的内部包装 div - 图表区域？
  4. svg

内部包装 div 看起来像图表区域。不幸的是，更改选项中的值没有效果 - 始终保持 'left: 0px; 顶部：0px；宽度：100%；高度：100%；'

注意我正在绘制 Google甘特图 - 看起来并非所有图表都具有相同的可能设置。我在例如“柱形图”下找到了 chartArea 选项，但它没有与“甘特图”一起列出

主图表文档说

您可以在两个地方指定图表大小：

  1. 在 HTML 中指定大小- 加载和呈现图表可能需要几秒钟。如果您已经在 HTML 中调整了图表容器的大小，则加载图表时页面布局不会跳转。
  2. 将大小指定为图表选项- 如果图表大小在 JavaScript 中，您可以复制和粘贴，或序列化、保存和恢复 JavaScript，并一致地调整图表大小。

如果您未在 HTML 中或作为选项指定图表大小，则图表可能无法正确呈现。

由于看起来图表大小只能设置为像素数（再次使用甘特图 - 我看到了其他似乎可以设置百分比的示例......）在我的情况下，这些设置有帮助

  1. 设置容器 div + 生成的子元素的 css
  2. 通过 js 以编程方式设置图表的高度
#gantt-chart {
        width: 100%;
        height: 100%;
        display: flex;
        overflow: auto;
}

#gantt-chart div {
        margin: auto; /* centers chart inside container div with display:flex*/
}


let trackHeight = 30

let options = {
  height: dataTable.getNumberOfRows() * trackHeight + 50
  // width adaps to container div with 100% width
}
于 2021-10-25T09:49:22.850 回答
0

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

但只是备份一下，我在第一个地方遇到这个问题的原因是：当页面加载时，这个图表显示的 div 是不可见的。

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

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

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

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

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

于 2017-06-15T19:11:00.997 回答