我使用了http://codeblitz.wordpress.com/2009/06/22/jquery-charts/
中提供的代码它使用jqPlot。所以我有以下示例代码Default.html:
<script type="text/javascript">
var jsonObj = { "pageHits": [30, 60, 22, 5, 60, 88, 102], "rssHits": [33, 45, 121, 23, 55, 35, 77], "xAxis": ['Jan 2009', 'Feb 2009', 'Mar 2009', 'Apr 2009', 'May 2009', 'June 2009', 'Jul 2009'] };
$(function () {
$.jqplot('chartDiv', [jsonObj.pageHits, jsonObj.rssHits], CreateBarChartOptions());
});
function CreateBarChartOptions()
{
var optionsObj = {
title: 'Blog Statistics',
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: jsonObj.xAxis
}
},
series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
legend: {
show: true,
location: 'nw'
},
seriesDefaults:{
shadow: true,
renderer:$.jqplot.BarRenderer,
rendererOptions:{
barPadding: 8,
barMargin: 10
}
},
highlighter: {
showTooltip: true,
tooltipFade: true
}
};
return optionsObj;
}
</script>
我已复制代码并将其放入Default.aspx。我唯一想要改变的是能够从外部文件中获取数据,所以现在我的代码是:
<script type="text/javascript">
var jsonObj;
$.getJSON('example.json', function (response)
{
jsonObj = response;
alert(jsonObj.property);
});
$(function () {
$.jqplot('chartDiv', [jsonObj.pageHits, jsonObj.rssHits], CreateBarChartOptions());
});
function CreateBarChartOptions()
{
var optionsObj = {
title: 'Blog Statistics',
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: jsonObj.xAxis
}
},
series: [{ label: 'Page Hits' }, { label: 'RSS Hits'}],
legend: {
show: true,
location: 'nw'
},
seriesDefaults: {
shadow: true,
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barPadding: 8,
barMargin: 10
}
},
highlighter: {
showTooltip: true,
tooltipFade: true
}
};
return optionsObj;
}
</script>
但是jsonObj总是未定义的,我假设我的文件格式不正确。我试过example.json来包含这个:
{“pageHits”:[30,60,22,5,60,88,102],“rssHits”:[33,45,121,23,55,35,77],“xAxis”:[' 2009年1月','2009年2月','2009年3月','2009年4月','2009年5月','2009年6月','2009年7月']}
和此:
{“pageHits”:[30,60,22,5,60,88,102],“rssHits”:[33,45,121,23,55,35,77],“xAxis”:[“ 2009年1月“,”2009年2月“,”2009年3月“,”2009年4月“,”2009年5月“,”2009年6月“,”2009年7月“]}
但无济于事。我做错了什么?
感谢您的帮助,
儒略
答案 0 :(得分:2)
您可能需要执行以下操作:
$.getJSON('example.json', function (response)
{
var jsonObj = response;
$.jqplot('chartDiv', [jsonObj.pageHits, jsonObj.rssHits], CreateBarChartOptions());
});
你现在拥有它的方式你的annon函数触发jqplot将运行'inline',而ajax加载仍然会继续。