3

Google折れ線グラフAPIを使用していますが、divチャートの寸法をどれだけ大きくしても、常に水平および垂直スクロールバーが表示されます. どうすればこれが起こらないようにできますか。

ここに画像の説明を入力

4

2 に答える 2

3

CONTEXT: https://code.google.com/apis/ajax/playground/?type=visualization#line_chartの編集可能な HTML (Firefox または Chorme を使用)。

問題を解決するための手順:

  • width=500px、height=400px のボックスが必要だとします。
  • 幅と高さの初期化が 500 と 400 の場合は、new google.visualization.LineChart() で Javascript を確認してください。
  • 描画先(id="visualization")のHTMLタグ(多分div)のstyleがstyle="width: 800px; height: 400px;"になっているか確認。
  • レンダリング場所の HTML 親タグ (任意) のスタイルが 500 と 400 より大きいか、100% かを確認します。

もう 1 つの解決策は、「HTML カット」によるものです。overflow:hidden を使用します。

スクロールがある場合の例 

        // ... piece of your javacascript.
    new google.visualization.LineChart(document.getElementById('visualization')).
        draw(data, {curveType: "function",
                    width: 800, height: 400,
                    vAxis: {maxValue: 10}}
            );
    } google.setOnLoadCallback(drawVisualization);

<!-- ... piece of your HTML -->
<div id="container" style="width:400px;overflow:scroll;">
  <div id="visualization" style="width: 800px; height: 400px;"></div>
</div>

HTML ソリューション (コンテナの幅を修正)

<!-- ... piece of your HTML -->
<div id="container" style="width:800px;overflow:scroll;">
  <div id="visualization" style="width: 800px; height: 400px;"></div>
</div>

別の単純な HTML ソリューション (overflow:hidden を使用) 

<!-- ... piece of your HTML -->
<div id="container" style="width:400px;overflow:hidden;">
  <div id="visualization" style="width: 800px; height: 400px;"></div>
</div>

... またはすべて、Javascript と HTML の幅と高さなどを減らします。

于 2012-04-16T14:51:08.153 に答える
1

使用：

<script src="https://www.google.com/jsapi"></script>
<script>
  google.load("visualization", "1", {packages:["corechart"]});
var data = new google.visualization.DataTable();
//init your data
var options = {
      width: "100%", height: "100%",
      //other options

}
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
</script>
....

<body>
   <div id="chart"></div>
</body>

グラフが使用しているdivに適合することを確認します。

次に、グラフセットstyle="width: ...px; height: ...px;"のサイズを目的のサイズに変更します。

<body>
  <div style="width: 800px; height: 400px;" id="chart"></div>
</body>
于 2012-04-21T18:13:01.087 に答える