javascript 如何在网页中定位 Google 图表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12253866/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I position a Google chart in a webpage?
提问by AturSams
I am using Google chart. The positioning eludes me. I haven't located that part in the documentation. I simply want to create a Google chart inside a div with the top left corner positioned in (x, y) in the div. Extra points for help with controlling the dimensions.
我正在使用谷歌图表。定位让我望而却步。我没有在文档中找到那部分。我只想在 div 内创建一个 Google 图表，左上角位于 div 中的 (x, y) 中。有助于控制尺寸的额外积分。
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
If I look in the html in 'runtime' using a tool like firebug I see:
如果我使用 firebug 之类的工具查看“运行时”中的 html，我会看到：
rect x="161" y="96" width="579" height="309"
But I did not pick any of those values.
但我没有选择这些值中的任何一个。
回答by Marc Polizzi
回答by Lee Taylor
OK, you need to add some extra HTML:
好的，您需要添加一些额外的 HTML：
<body>
<div style="position:relative;width:100%">
<div id="chart_div" style="position:absolute;right:0px;top:0px;width: 400px; height: 300px;"></div>
</div>
</body>
The height of the chart can be controlled by the width and height of the div. The placement can be controlled by changing, right, top, of changing to left/bottom, etc.
图表的高度可以通过div的宽度和高度来控制。可以通过更改，右侧，顶部，更改为左侧/底部等来控制放置。
You may want to float the chart_div, or use any other method of positioning.
您可能想要浮动 chart_div，或使用任何其他定位方法。
Depending on your requirements, this may be enough: If not, let me know.
根据您的要求，这可能就足够了：如果没有，请告诉我。
