21

500px x 500pxに設定されているが、400pxx200pxを返すGoogleグラフがあります。私は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

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

1つ目は、それを含む要素のサイズを設定することです。グラフは、デフォルトで含まれている要素の幅と高さになります（height / widthのデフォルト値については、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をポイントすると、グラフのプロット領域が500pxx500pxになります。

あなたがそれを望まないと仮定すると、あなたの新しいオプションは次のようになります：

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

したがって、jmacの答えのように高さと幅を設定することはできますが、応答性が必要な場合は、さらにいくつかのことを行う必要があります。

しかし、ちょっとバックアップするために、私が最初にこの問題を抱えている理由は次のとおりです。このチャートが表示されているdivは、ページが読み込まれるときに表示されません。

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

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

これを行う別の方法は、chart.draw（）が呼び出される直前にチャートを再表示してから、もう一度非表示にすることです。

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

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

于 2017-06-15T19:11:00.997 に答える
0

レンダリングされたグラフのサイズが400x200pxであるのと同じケースがあります

レンダリングされた後、svgは3div内にラップされます

<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. chart = new google.visualization.Gantt（document.getElementById（'gantt-chart'））;で設定された独自のコンテナ
  2. 生成された外部ラッパーdiv-幅と高さのセット>ここで？svgサイズと同期しているようです
  3. 生成された内部ラッパーdiv-チャート領域？
  4. svg

内側のラッパーdivは、チャート領域のように見えます。残念ながら、オプションの値を変更しても効果はありません-常に'左に留まります：0px; 上：0px; 幅：100％; 高さ：100％; '

注意Googleガントチャートを描画しています-すべてのチャートが同じ可能な設定を持っているわけではないようです。たとえば「列チャート」の下にchartAreaオプションがありますが、「ガントチャート」にリストされていません。

メインチャートのドキュメントには、

グラフのサイズは次の2か所で指定できます。

  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 に答える