Question

我正在使用google line chart api，无论我做多大的div图尺寸，它总是显示水平和垂直滚动条。我怎么能阻止这种情况发生。

enter image description here

Answer 1

CONTEXT：https://code.google.com/apis/ajax/playground/?type=visualization#line_chart的可编辑HTML（使用Firefox或Chorme）。

帮助您解决问题的说明：

假设你需要一个宽度= 500px且高度= 400px的盒子。
检查新版google.visualization.LineChart（）中的Javascript，如果宽度和高度为inicializations为500和400.
检查renderization地方的HTML标签（可能是div）的样式（id =＆＃34; visualization＆＃34;）是style =＆＃34; width：800px;身高：400px;＆＃34;。
检查renderization place的HTML父标记（任意）的样式是否大于500和400，或者是100％。

另一个解决方案是＆＃34; HTML cut＆＃34;：使用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解决方案（使用溢出：隐藏）

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

...或者减少所有，Javascript和HTML的宽度和高度等。

Answer 2

使用：

<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>

为什么我在使用谷歌折线图时会得到滚动条？

2 个答案: