最近做的項目中需要用餅狀圖顯示——'問卷調查'的統計結果(之前用過FusionChart做過柱狀圖的數據展示，那還是兩年前的事了)，在網上查了下FusionChart實現餅狀圖顯示方面的資料，卻發現資料都比較零散、不完整，或者說沒有簡潔明瞭的說清楚其用法，到FusionChart官網上去看，無奈是英文的，而且Deom項目太大，沒有耐心去看，最後還是將以前的項目找出來，摸索着弄了下搞定，現將FusionChart實現柱狀圖、餅狀圖的動態數據顯示的方法和經驗寫出來，希望對做web開發需要的朋友能有所幫助，也算是做個總結——便於以後需用時，能方便查看！
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <div id="divBarChart"> 8 </div> 9 <div id="divPieChart"> 10 </div> 11 <div id="divPieChart2"> 12 </div> 13 <script type="text/javascript" src="FusionChart/FusionCharts.js"></script> 14 <script type="text/javascript"> 15 function ConstructHttpString(myURL) { 16 myURL += "?rnd=" + new Date().getTime(); 17 return encodeURIComponent(myURL.toString()); 18 } 19 //畫圖(以指定 xml格式文件爲數據源) 20 function DrawChart(divId,flashFileName,width,height,xmlUrl) { 21 var myChartId = new Date().getTime(); 22 var myChart = new FusionCharts("FusionChart/" + flashFileName, myChartId, width, height); 23 //myChart.setDataURL("data.xml"); //獲取xml格式數據源 24 myChart.setDataURL(ConstructHttpString(xmlUrl)); //獲取xml格式數據源 25 myChart.set 26 myChart.addParam("wmode", "Opaque"); 27 myChart.render(divId); 28 } 29 30 //畫圖 (以指定 xml格式字符串爲數據源) 31 function DrawChart2(divId, flashFileName, width, height) { 32 var myChartId = new Date().getTime(); 33 var myChart = new FusionCharts("FusionChart/" + flashFileName, myChartId, width, height); 34 myChart.setDataXML('<chart caption="逗你玩" numberPrefix="$"><set value="25" label="Item A" color="AFD8F8" /><set value="17" label="Item B" color="F6BD0F" /><set value="23" label="Item C" color="8BBA00" isSliced="1" /></chart>'); 35 myChart.addParam("wmode", "Opaque"); 36 myChart.render(divId); 37 } 38 //柱狀圖 39 DrawChart("divBarChart", "StackedColumn2D.swf", "831", "396", "dataXml.xml"); 40 //餅狀圖 41 DrawChart("divPieChart", "Pie2D.swf", "831", "396", "xml.aspx"); 42 //餅狀圖 43 DrawChart2("divPieChart2", "Pie2D.swf", "500", "396"); 44 </script> 45 </body> 46 </html>
上面是，前端頁面上的使用，可以看出：其用法很簡單，對於繪製柱狀圖或是餅狀圖等，對於使用唯一的區別就是：指定不同的展示flash文件和相應的xml格式內容(具體每種chart圖表對應的xml文件格式，請查看官網Demo)。其方法主要方法有：
setDataURL：設置數據源Url，以指定 xml格式文件爲數據源
setDataXML：設置數據源xml內容，以指定 xml格式字符串爲數據源
(網上說有個setJSONData的方法，可以設置json對象作爲數據源，但應該是老版本或整合修改後的js文件，沒找到，所以直接設置json對象作爲數據源貌似不行！)
1 using System; 2 3 namespace Web_Client.pieChart 4 { 5 public partial class xml : System.Web.UI.Page 6 { 7 protected void Page_Load(object sender, EventArgs e) 8 { 9 Response.ContentType = "text/xml; characterset=utf-8"; 10 Response.BinaryWrite(new byte[] { 0xEF, 0xBB, 0xBF }); 11 Response.Write("<chart caption=\"餅狀圖\" numberPrefix=\"$\"><set value=\"25\" label=\"項目 A\" color=\"AFD8F8\" /><set value=\"17\" label=\"Item B\" color=\"F6BD0F\" /><set value=\"23\" label=\"Item C\" color=\"8BBA00\" isSliced=\"1\" /> <set value=\"65\" label=\"Item D\" color=\"A66EDD\" /><set value=\"22\" label=\"Item E\" color=\"F984A1\" /></chart>"); 12 Response.End(); 13 } 14 } 15 }
以上是在後臺代碼中輸出xml格式文件爲數據源，需要注意的是：Response.ContentType = "text/xml; characterset=utf-8";Response.BinaryWrite(new byte[] { 0xEF, 0xBB, 0xBF });——這兩行代碼是不可缺少的，其作用是：指定輸出xml文件的編碼和解決中文亂碼問題！
效果圖如下：
好了，到此爲止，FusionChart的用法已介紹完畢，其本身比較簡單，文章中不想做過多的敘述，如果有不清楚的朋友，可以給我留言！