Googleグラフのデフォルトサイズ

Question

私はGoogleグラフを500pxで500pxに設定していますが、400pxで200pxを返します。私は部門を見て、それは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）。あなたが実際に何をしている

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

：

第二は、手動でオプションにそれらを追加することによって、500pxなど各チャートの高さ/幅を要素の実際のサイズを定義し、代わりに設定されていないことですあなたのコードでは、グラフのプロット自体の大きさを設定しています（軸、ラベル、凡例のチャート全体の要素ではありません）。コメントに@ Dr.Molleが指摘している適切なdivを指し示すと、グラフプロット領域が500ピクセル×500ピクセルになります。

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

Answer 2

だから、JMACの答えの作品のように高さと幅を設定することができますが、それを応答をしたい場合は、いくつかの追加のものがあります：あなたがあなたの新しいオプションは次のようになり、ことを望んでいないと仮定すると、

私がしなければなりませんでした。

しかし、ちょうど私が1位で、この問題が生じています第二の理由をバックアップするには、次のとおりです。このチャートはで表示している のdivが 見えないページがロードされます。ここで見隠しチャート幅が 正しいあるとしてjsfiddle.net/muc7ejn3/6/

：隠されたチャートの幅はここに見られるように

は200によって間違っ 400あるjsfiddle.net/muc7ejn3/7それを行うには/

もう一つの方法は、ちょうどに右chart.draw前にチャートをアン隠す（）が呼び出されると、再びそれを隠すようなもの：

これは処理しない

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

ウィンドウがリサイズされます。