FusionChart實現柱狀圖、餅狀圖的動態數據顯示附Demo

時間 2021-08-13

標籤 javascript html 前端 java web json ide 編碼 spa code 欄目 JavaScript 简体版

原文原文鏈接

　　最近作的項目中須要用餅狀圖顯示——'問卷調查'的統計結果(以前用過FusionChart作過柱狀圖的數據展現，那仍是兩年前的事了)，在網上查了下FusionChart實現餅狀圖顯示方面的資料，卻發現資料都比較零散、不完整，或者說沒有簡潔明瞭的說清楚其用法，到FusionChart官網上去看，無奈是英文的，並且Deom項目太大，沒有耐心去看，最後仍是將之前的項目找出來，摸索着弄了下搞定，現將FusionChart實現柱狀圖、餅狀圖的動態數據顯示的方法和經驗寫出來，但願對作web開發須要的朋友能有所幫助，也算是作個總結——便於之後需用時，能方便查看！javascript

 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)。其方法主要方法有：html

　　setDataURL：設置數據源Url，以指定 xml格式文件爲數據源前端

　　setDataXML：設置數據源xml內容，以指定 xml格式字符串爲數據源java

　　(網上說有個setJSONData的方法，能夠設置json對象做爲數據源，但應該是老版本或整合修改後的js文件，沒找到，因此直接設置json對象做爲數據源貌似不行！)web

 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文件的編碼和解決中文亂碼問題！json

　　效果圖以下：ide