Rails 3.1 Ajax 部分中的 Google Charts
我一直在使用 Google 图表，没有任何问题，但现在我需要在 Ajax 渲染的部分中显示图表。
显然什么也没有显示。我知道这与构建图表的 Java 触发器未激活有关，但我需要一些帮助来了解我需要做什么...
目前我有这样的东西（非 Ajax）：
<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 = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
width: 400, height: 240,
title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
I've been working with Google charts with no problems but I've now got to a point where I need to display a chart inside of an Ajax-rendered partial.
Obviously nothing is showing. I know it's something to do with the Java trigger to build the chart not being activated, but I need some help with exactly what it is I need to do...
Currently I have something like this (non-Ajax):
<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 = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
width: 400, height: 240,
title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
在您的主页中保留这些（无需在部分中加载谷歌图表）：
在您的部分中，您需要执行如下操作（假设您使用 jQuery）。重点是在 dom 加载后执行 js 代码，这就是 $(function() {....}) 的作用：
使用像 jQuery 这样的库将为您节省许多小时的浏览器不一致问题了解 dom 何时正确加载。
In your main page keep these (no need to load google charts in the partial):
In your partial you need to do something like below (assuming you use jQuery). The point is to execute the js code after the dom is loaded which is what $(function() {....}) does:
Using a library like jQuery will save you many hours of browsers inconsistencies for knowing when the dom is properly loaded.
替换
为
AJAX 部分就成功了！感谢您的帮助，之前 DOM 正在重新加载，但图表没有插入。
Replacing
with
did the trick for the AJAX partials! Thanks for the help, previously the DOM was reloading but the charts weren't getting inserted.