您的位置:首页 > Web前端 > JQuery

asp.net+FusionCharts+jQuery(ajax)后台请求数据生成图表

2012-05-10 17:56 651 查看
关键:使用FusionCharts的setJSONData(data)或者setXMLData(data)方法。

前台aspx部分代码:

<div id="Div7">对比曲线</div>
<script type="text/javascript"><!--
$(document).ready(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "FusionCharts.asmx/getJsonData",
data: "{}",
dataType: 'json',

success: function(json) {
var data = eval('(' + json.d + ')');
var myChart = new FusionCharts("Column3D.swf", "myChartId7", "330", "220", "0", "1");
myChart.setJSONData(data);
myChart.render("Div7");
},

error: function(xhr) { //如果没有上面的捕获出错会执行这里的回调函数
alert('页出错\n\r' + xhr.responseText);
}
});
});

// -->
</script>
</div>


FusionCharts.asmx部分代码:

[WebMethod]
public string getJsonData()
{
//各种数据源
//取回的数据转换成Json格式,手动写,其它API转换都可以,具体情况,具体分析

string b = "{ \"chart\": { \"caption\" : \"Weekly Sales Summary\" , \"xAxisName\" : \"Week\", " +
"\"yAxisName\" : \"Sales\", \"numberPrefix\" : \"$\" }," +

"\"data\" :[ " +

" { \"label\" : \"Week 1\", \"value\" : \"100\" }," +
"{ \"label\" : \"Week 2\", \"value\" : \"191600\" }, " +
" {\"label\" : \"Week 3\", \"value\" : \"14000\" }, " +
" { \"label\" :\"Week 4\", \"value\" : \"55700\" } ]}";

return b;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐