爲什麼我在使用谷歌折線圖時會出現滾動條？

我使用google line chart api，無論我做多大的div圖表尺寸，它總是顯示一個水平和垂直滾動條。我怎麼能阻止這種情況發生。爲什麼我在使用谷歌折線圖時會出現滾動條？

enter image description here

來源

2012-04-12 leora

你能發佈HTML，JavaScript和CSS是用來呈現圖表？或者具有相同行爲的簡化示例？這是否發生在不同的瀏覽器中？ – Christian 2012-04-16 14:16:59

你應該已經發布了你的代碼;將大大幫助你的問題:)也正如基督教提到的：這是否發生在所有瀏覽器或所以？ – 2012-04-21 10:25:33

@leora：您確定滾動條不是由實際包含圖表的父元素應用的嗎？ – 2012-04-23 13:38:49

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

說明可以幫助您在這個問題：

假設你需要一個框寬度= 500像素，高400像素=。
在新的google.visualization.LineChart（）中檢查Javascript，如果寬度和高度初始化爲500和400.
檢查渲染場所（id =「visualization」）的HTML標記（可能是div）是style =「width：800px; height：400px;」。
檢查渲染場所的HTML父標記（任何）的樣式是否大於500和400，或者是100％。

另一個解決方案是通過「HTML剪切」：使用overflow：hidden。套箱SCROLL

例

 // ... 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 SOLUTION（使用溢出：隱藏）

<!-- ... 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-16 14:51:08

謝謝。。看起來像我有一些額外的CSS正在改變溢出 – leora 2012-04-23 15:22:27

使用：

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

您確保圖形將適合您使用的股利。

然後調整圖形設置style="width: ...px; height: ...px;"與所需的大小：

<body> 
    <div style="width: 800px; height: 400px;" id="chart"></div> 
</body>

來源

2012-04-21 18:13:01

爲什麼我在使用谷歌折線圖時會出現滾動條？

回答

相關問題