.net+FusionChart實現(xiàn)動態(tài)顯示的柱狀圖和餅狀圖
html代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div id="divBarChart"> </div> <div id="divPieChart"> </div> <div id="divPieChart2"> </div> <script type="text/javascript" src="FusionChart/FusionCharts.js"></script> <script type="text/javascript"> function ConstructHttpString(myURL) { myURL += "?rnd=" + new Date().getTime(); return encodeURIComponent(myURL.toString()); } //畫圖(以指定 xml格式文件為數(shù)據(jù)源) function DrawChart(divId,flashFileName,width,height,xmlUrl) { var myChartId = new Date().getTime(); var myChart = new FusionCharts("FusionChart/" + flashFileName, myChartId, width, height); //myChart.setDataURL("data.xml"); //獲取xml格式數(shù)據(jù)源 myChart.setDataURL(ConstructHttpString(xmlUrl)); //獲取xml格式數(shù)據(jù)源 myChart.set myChart.addParam("wmode", "Opaque"); myChart.render(divId); } //畫圖 (以指定 xml格式字符串為數(shù)據(jù)源) function DrawChart2(divId, flashFileName, width, height) { var myChartId = new Date().getTime(); var myChart = new FusionCharts("FusionChart/" + flashFileName, myChartId, width, height); 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>'); myChart.addParam("wmode", "Opaque"); myChart.render(divId); } //柱狀圖 DrawChart("divBarChart", "StackedColumn2D.swf", "831", "396", "dataXml.xml"); //餅狀圖 DrawChart("divPieChart", "Pie2D.swf", "831", "396", "xml.aspx"); //餅狀圖 DrawChart2("divPieChart2", "Pie2D.swf", "500", "396"); </script> </body> </html>
上面是,前端頁面上的使用,可以看出:其用法很簡單,對于繪制柱狀圖或是餅狀圖等,對于使用唯一的區(qū)別就是:指定不同的展示flash文件和相應(yīng)的xml格式內(nèi)容(具體每種chart圖表對應(yīng)的xml文件格式,請查看官網(wǎng)Demo)。其方法主要方法有:
- setDataURL:設(shè)置數(shù)據(jù)源Url,以指定 xml格式文件為數(shù)據(jù)源
- setDataXML:設(shè)置數(shù)據(jù)源xml內(nèi)容,以指定 xml格式字符串為數(shù)據(jù)源
(網(wǎng)上說有個setJSONData的方法,可以設(shè)置json對象作為數(shù)據(jù)源,但應(yīng)該是老版本或整合修改后的js文件,沒找到,所以直接設(shè)置json對象作為數(shù)據(jù)源貌似不行!)
using System; namespace Web_Client.pieChart { public partial class xml : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Response.ContentType = "text/xml; characterset=utf-8"; Response.BinaryWrite(new byte[] { 0xEF, 0xBB, 0xBF }); 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>"); Response.End(); } } }
以上是在后臺代碼中輸出xml格式文件為數(shù)據(jù)源,需要注意的是:Response.ContentType = "text/xml; characterset=utf-8";Response.BinaryWrite(new byte[] { 0xEF, 0xBB, 0xBF });——這兩行代碼是不可缺少的,其作用是:指定輸出xml文件的編碼和解決中文亂碼問題!
效果圖如下:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- jQuery插件FusionCharts繪制的2D雙柱狀圖效果示例【附demo源碼】
- jQuery插件FusionCharts繪制的3D雙柱狀圖效果示例【附demo源碼】
- jQuery插件FusionCharts實現(xiàn)的2D柱狀圖效果示例【附demo源碼下載】
- jQuery插件FusionCharts實現(xiàn)的3D柱狀圖效果實例【附demo源碼下載】
- jQuery插件FusionCharts實現(xiàn)的2D餅狀圖效果【附demo源碼下載】
- jQuery插件FusionCharts繪制的3D餅狀圖效果實例【附demo源碼下載】
- jQuery插件FusionCharts繪制2D柱狀圖和折線圖的組合圖效果示例【附demo源碼】
相關(guān)文章
ASP.net與SQLite數(shù)據(jù)庫通過js和ashx交互(連接和操作)
這篇文章主要介紹了ASP.net與SQLite數(shù)據(jù)庫通過js和ashx交互(連接和操作),具有一定的參考價值,有興趣的可以了解一下。2017-01-01導(dǎo)致Asp.Net站點重啟10個原因小結(jié)分析
Asp.Net站點有時候會莫名其妙的重啟,什么原因?qū)е碌膮s不得而知,經(jīng)過一番折騰后,我總結(jié)了導(dǎo)致Asp.Net站點重啟的10個原因,需要的朋友可以參考下。2011-08-08在ASP.NET?MVC下限制同一個IP地址單位時間間隔內(nèi)的請求次數(shù)的解決方法
有時候,當用戶請求一個Controller下的Action,我們希望,在單位時間間隔內(nèi),比如每秒,每分鐘,每小時,每天,每星期,限制同一個IP地址對某個Action的請求次數(shù),如何做呢?這篇文章主要介紹了在ASP.NET?MVC下限制同一個IP地址單位時間間隔內(nèi)的請求次數(shù),需要的朋友可以參考下2024-01-01