由于andyg1和上升,我能够做出像这样的工作(使用PrototypeJS而不是jQuery的,但这个想法是一样的)。由于这一点并不明显,我将展示所有步骤。
Ajax端点刚刚返回json,看起来像这样(一个.NET MVC模板)。请注意,我发现我已经引述一切这Google's documentation并不表明是必要的:
<%
Response.Headers.Add("Content-type", "text/json");
Response.AddHeader("Content-type", "application/json");
%>
{
"cols": [
{"id": "col_1", "label": "Date", "type": "string"},
{"id": "col_2", "label": "Score", "type": "number"}
],
"rows": [
<%
int index = 0;
foreach(KeyValuePair<string, double> item in Model.Performance) { %>
{"c":[{"v":"<%= item.Key %>"}, {"v":<%= item.Value %>}]}<%= (index == Model.Performance.Count - 1) ? "" : "," %>
<% index++; %>
<%
}
%>
]
}
然后母版页包含在此:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="/js/myJavascriptFile.js" />
然后在myJavascriptFile.js(注意的最后一行初始化方法是google.setOnLoadCallback这在我的课没有drawChart)调用的方法:
google.load('visualization', '1', {'packages':['corechart']});
var colors = {'blue': '#369', 'red': '#c22', 'green': '#283', 'yellow': '#c91'};
var MyClass = Class.create({
initialize: function() {
...
google.setOnLoadCallback(this.getTeamCharts);
},
getTeamCharts: function() {
$$(".chart-wrapper").each(function (div) {
var chartData = div.getData();
var parameters = {
...
};
new Ajax.Request('/endpoints/TeamChart.aspx', {
method: 'get',
parameters: parameters,
onSuccess: function(transport) {
var jsonData = transport.responseJSON;
var data = new google.visualization.DataTable(jsonData);
var chartColor = colors[parameters.TeamColor];
var chartDivId = 'chart_div_' + parameters.TeamIdAsString;
// Set chart options
var options = {
'chartArea': {'left':'15%','top':'15%','width':'80%','height':'70%'},
'legend': {'position': 'none'},
'lineWidth': 3,
'width': 262,
'height': 180,
'colors': [chartColor]
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById(chartDivId));
chart.draw(data, options);
}
});
});
}
});
document.observe("dom:loaded", function() {
var thing = new MyClass();
});
我敢肯定,这可以进一步改进,但它的工程!
我正在撕裂我的耳朵,试图弄清楚这一点,但读到你的评论,它突然变得有意义。在示例代码中,在“google.load ...”语句之后,总有一条语句,如google.setOnLoadCallback(drawVisualization);但是当然你不需要使用回调函数,你可以在你准备好绘制它时自己调用drawVisualization()方法。 – Ascendant
你不知道这个答案的结构和帮助有多好!很容易被忽视,因为你没有将问题标记为答案(即使你提供了自己的答案,也请做),但是非常有帮助! – SW4
我的坏!只是标记了它。 – andyg1