web-dev-qa-db-ja.com

Googleチャートのデフォルトサイズ

500px x 500pxに設定されたGoogleチャートがありますが、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>
google-visualization
19
arcee123

グラフのサイズを設定する方法はいくつかあります。

1つ目は、要素を含む要素のサイズを設定することです。チャートはデフォルトで、含まれている要素の幅と高さに設定されます（ 高さ/幅のデフォルト値については、Google Visualizationのドキュメントを参照してください ）。

2つ目は、要素の実際のサイズを定義せずに、オプションにチャートの高さ/幅を手動で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
};
34
jmac

したがって、jmacの答えのように高さと幅を設定することは機能しますが、必要に応じてsensitiveを実行すると、追加の処理が必要になります。

しかし、2番目にバックアップするために、私が最初にこの問題を抱えている理由は、次のとおりです。このグラフが表示されているdivは、ページの読み込み時にnot visibleです。

ここに見られるように、隠されたチャートの幅はWrong 400 x 200です：jsfiddle.net/muc7ejn3/6/

ここに見られるように、隠されたチャートの幅は正しい：jsfiddle.net/muc7ejn3/7/です。

これを行う別の方法は、chart.draw（）が呼び出される直前にChartを再表示し、次に再度非表示にすることです。

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

これは、ウィンドウのサイズ変更を処理しません。

0
Nick Timmer