我有一个应用程序使用 Jquery (Ajax) 发布到我的服务器,并在页面上接收和显示 HTML 数据。这是一个非常简单的 JQuery 调用,如下所示:
function LoadStats(isUpdate) {
$.ajax({
cache: false,
url: url,
data: {
{someData, removed for SF}
},
success: function (data) {
$("#statsBox").html(data);
}
});
}
我想做的是在这个框中显示一个简单的谷歌图表。但是,当我这样做时,javascript 似乎无法正确显示。我在 MVC 视图中使用 Google Charts 中的基本示例,如下所示:
<div>HTML Here. Hello</div>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2004', 1000 ],
['2005', 1170 ],
['2006', 660 ],
['2007', 1030 ]
]);
var options = {
title: 'Company Performance',
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.BarChart(document.getElementById('statsBox'));
chart.draw(data, options);
}
</script>
我最初的尝试包括将对 google.com/jsapi 脚本的引用放在视图本身中,这给了我一个错误,即 Google 未定义。所以我把对 API 的引用放在我的页面的标题中,这消除了错误,但现在当它加载时,它会使屏幕空白。没有错误,只是一个白色的空白页。
请记住,一旦我真正让图表工作,我将使用来自服务器的数据填充它,因此我不只是将它放在页面本身中。我在这里想念什么?我觉得它与 setOnLoadCallback 有关,因为我正在使用 jquery 帖子加载数据,所以我需要设置一些其他设置才能显示它。