google-api - 为什么我在使用谷歌折线图时会出现滚动条？

Question

我正在使用 google line chart api而且无论我将 div 图表尺寸设置得有多大，它始终会显示水平和垂直滚动条。我怎样才能阻止这种情况发生。

Answer 1

上下文:https://code.google.com/apis/ajax/playground/?type=visualization#line_chart 的可编辑 HTML (使用 Firefox 或 Chorme)。

帮助您解决问题的说明:

• 假设您需要一个宽度为 500 像素且高度为 400 像素的框。
• 在新的 google.visualization.LineChart() 中检查 Javascript，如果宽度和高度初始化为 500 和 400。
• 检查渲染位置(id="visualization")的 HTML 标签(可能是 div)的样式是否为 style="width: 800px; height: 400px;"。
• 检查渲染位置的 HTML 父标签(任何)的样式是否大于 500 和 400，或者是否为 100%。

另一种解决方案是通过“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 的宽度和高度等。