.net+FusionChart實(shí)現(xiàn)動(dòng)態(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>上面是,前端頁(yè)面上的使用,可以看出:其用法很簡(jiǎn)單,對(duì)于繪制柱狀圖或是餅狀圖等,對(duì)于使用唯一的區(qū)別就是:指定不同的展示flash文件和相應(yīng)的xml格式內(nèi)容(具體每種chart圖表對(duì)應(yīng)的xml文件格式,請(qǐng)查看官網(wǎng)Demo)。其方法主要方法有:
- setDataURL:設(shè)置數(shù)據(jù)源Url,以指定 xml格式文件為數(shù)據(jù)源
- setDataXML:設(shè)置數(shù)據(jù)源xml內(nèi)容,以指定 xml格式字符串為數(shù)據(jù)源
(網(wǎng)上說有個(gè)setJSONData的方法,可以設(shè)置json對(duì)象作為數(shù)據(jù)源,但應(yīng)該是老版本或整合修改后的js文件,沒找到,所以直接設(shè)置json對(duì)象作為數(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=\"項(xiàng)目 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();
}
}
}以上是在后臺(tái)代碼中輸出xml格式文件為數(shù)據(jù)源,需要注意的是:Response.ContentType = "text/xml; characterset=utf-8";Response.BinaryWrite(new byte[] { 0xEF, 0xBB, 0xBF });——這兩行代碼是不可缺少的,其作用是:指定輸出xml文件的編碼和解決中文亂碼問題!
效果圖如下:

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery插件FusionCharts繪制的2D雙柱狀圖效果示例【附demo源碼】
- jQuery插件FusionCharts繪制的3D雙柱狀圖效果示例【附demo源碼】
- jQuery插件FusionCharts實(shí)現(xiàn)的2D柱狀圖效果示例【附demo源碼下載】
- jQuery插件FusionCharts實(shí)現(xiàn)的3D柱狀圖效果實(shí)例【附demo源碼下載】
- jQuery插件FusionCharts實(shí)現(xiàn)的2D餅狀圖效果【附demo源碼下載】
- jQuery插件FusionCharts繪制的3D餅狀圖效果實(shí)例【附demo源碼下載】
- jQuery插件FusionCharts繪制2D柱狀圖和折線圖的組合圖效果示例【附demo源碼】
相關(guān)文章
ASP.net與SQLite數(shù)據(jù)庫(kù)通過js和ashx交互(連接和操作)
這篇文章主要介紹了ASP.net與SQLite數(shù)據(jù)庫(kù)通過js和ashx交互(連接和操作),具有一定的參考價(jià)值,有興趣的可以了解一下。2017-01-01
導(dǎo)致Asp.Net站點(diǎn)重啟10個(gè)原因小結(jié)分析
Asp.Net站點(diǎn)有時(shí)候會(huì)莫名其妙的重啟,什么原因?qū)е碌膮s不得而知,經(jīng)過一番折騰后,我總結(jié)了導(dǎo)致Asp.Net站點(diǎn)重啟的10個(gè)原因,需要的朋友可以參考下。2011-08-08
asp.net簡(jiǎn)化接收參數(shù)值的函數(shù)
獲取querystring 參數(shù)名2008-05-05
在ASP.NET?MVC下限制同一個(gè)IP地址單位時(shí)間間隔內(nèi)的請(qǐng)求次數(shù)的解決方法
有時(shí)候,當(dāng)用戶請(qǐng)求一個(gè)Controller下的Action,我們希望,在單位時(shí)間間隔內(nèi),比如每秒,每分鐘,每小時(shí),每天,每星期,限制同一個(gè)IP地址對(duì)某個(gè)Action的請(qǐng)求次數(shù),如何做呢?這篇文章主要介紹了在ASP.NET?MVC下限制同一個(gè)IP地址單位時(shí)間間隔內(nèi)的請(qǐng)求次數(shù),需要的朋友可以參考下2024-01-01

