3

我正在使用谷歌折线图 api，无论我制作多大的 div 图表尺寸，它总是显示一个水平和垂直滚动条。我怎样才能阻止这种情况发生。

在此处输入图像描述

4

2 回答 2

3

上下文： 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 父标签 (any) 的样式是否大于 500 和 400，或者是 100%。

另一种解决方案是通过“HTML cut”：使用溢出：隐藏。

滚动案例示例 

        // ... 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 SOLUTION（固定容器宽度）

<!-- ... 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 宽度和高度等。

于 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 回答