私がGoogle Chartsを使用するとき、それは位置を使用します:divの1つの中で絶対。それはレイアウトを台無しにします。
私が入れたHTMLで:
<div id="chart-1-year" />
そしてJavascript:
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['x', 'Performance'],
<%= CurrentData.first.chart_1_year%>
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('chart-1-year')).
draw(data, {curveType: "function",
width: 500, height: 400, title: "Performance 1 Year"
}
);
}
ブラウザーで次のように表示されます (Firebug を使用):
<div class="row">
<div id="chart-1-year" style="position: relative;">
<div style="position: relative; width: 500px; height: 400px;" dir="ltr">
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
</div>
<div style="display: none; position: absolute; top: 410px; left: 510px; white-space: nowrap; font-family: Arial; font-size: 12px;">Performance</div>
</div>
</div>
「position: absolute;」を削除すると正常に動作します。内側のdivから。
その位置設定を変更するにはどうすればよいですか?