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

关键：使用FusionCharts的setJSONData(data)或者setXMLData(data)方法。

前台aspx部分代码：

[csharp] view plain copy

1. <div id="Div7">对比曲线</div>            
2.     <script type="text/javascript"><!--           
3.         $(document).ready(function() {  
4.             $.ajax({  
5.                 type: "POST",  
6.                 contentType: "application/json; charset=utf-8",  
7.                 url: "FusionCharts.asmx/getJsonData",  
8.                 data: "{}",  
9.                 dataType: 'json',  
10.   
11.                 success: function(json) {  
12.                     var data = eval('(' + json.d + ')');  
13.                     var myChart = new FusionCharts("Column3D.swf", "myChartId7", "330", "220", "0", "1");  
14.                     myChart.setJSONData(data);  
15.                     myChart.render("Div7");  
16.                 },  
17.   
18.                 error: function(xhr) { //如果没有上面的捕获出错会执行这里的回调函数  
19.                     alert('页出错\n\r' + xhr.responseText);  
20.                 }  
21.             });  
22.         });  
23.         
24.     // -->       
25.     </script>        
26.     </div>  

FusionCharts.asmx部分代码：

[csharp] view plain copy

1. [WebMethod]  
2.         public string getJsonData()  
3.         {  
4.             //各种数据源  
5.             //取回的数据转换成Json格式,手动写,其它API转换都可以,具体情况,具体分析  
6.   
7.             string b = "{ \"chart\": { \"caption\" : \"Weekly Sales Summary\" , \"xAxisName\" : \"Week\", " +  
8.                        "\"yAxisName\" : \"Sales\", \"numberPrefix\" : \"$\" }," +  
9.   
10.                        "\"data\" :[ " +  
11.   
12.                        " { \"label\" : \"Week 1\", \"value\" : \"100\" }," +  
13.                        "{ \"label\" : \"Week 2\", \"value\" : \"191600\" }, " +  
14.                        " {\"label\" : \"Week 3\", \"value\" : \"14000\" }, " +  
15.                        " { \"label\" :\"Week 4\", \"value\" : \"55700\" } ]}";  
16.   
17.             return b;  
18.         }