ASP.NET中的圖像報(bào)表FusionCharts

發(fā)表日期：2015-10-01 文章編輯：南昌開優(yōu)網(wǎng)絡(luò) 瀏覽次數(shù)：4321 標(biāo)簽：ASP.NET應(yīng)用

一、下載FusionCharts 3.1版

二、拷入Code/CS/Bin中的FusionCharts.dll 和 FusionCharts文件夾及其中的所有js和swf文件到實(shí)際項(xiàng)目中

Column2D.swf為2D柱形圖

Column3D.swf為3D柱形圖

Area2D.swf為面積圖

Line.swf為曲線圖

Pie3D.swf為餅狀圖

三、使用FusionCharts的生成圖表的三種方式

①、使用XML作為圖表數(shù)據(jù)源

1、創(chuàng)建xml文件XMLFile.xml

注：該xml是FusionCharts的標(biāo)準(zhǔn)文件其中：

caption：解說詞及圖表的標(biāo)題

xAxisName：X軸的名稱

yAxisName：Y軸的名稱

set標(biāo)簽label為名稱value為值其中value必須為數(shù)字

2、引用FusionCharts.dll 和FusionCharts文件夾中的js文件

3、在文件中加上一個(gè)按鈕，一個(gè)Literall控件，在按鈕的事件中編寫如下代碼：

Literal1.Text = FusionCharts.RenderChart("FusionCharts/Column3D.swf", "XMLFile.xml", "", "myFirst", "700", "500", false, true);

②、使用用戶輸入數(shù)據(jù)的方式

1、頁面中添加Fusion Charts的腳本調(diào)用代碼，如下：

2、在頁面中添加一個(gè)表格，如下圖所示：

ASP.NET中使用Fusion Charts圖表工具

　　在這個(gè)表格中，允許用戶輸入三個(gè)不同的數(shù)值，然后我們進(jìn)行相應(yīng)的處理。

3、在提交的按鈕的事件代碼中，編寫如下代碼：

StringBuilder xmlData = new StringBuilder();
xmlData.Append("<chart caption='IPL Points' subCaption='For Season 2011 so far'
showPercentValues='1' pieSliceDepth='30' showBorder='1'>");
xmlData.AppendFormat("<set label='Mumbai' value='{0}' />", txtMumbai.Text);
xmlData.AppendFormat("<set label='Chennai' value='{0}' />", txtChennai.Text);
xmlData.AppendFormat("<set label='Kochi' value='{0}' />", txtKochi.Text);
xmlData.Append("</chart>");
Literal1.Text = FusionCharts.RenderChart("FusionCharts/Pie3D.swf", "",
xmlData.ToString(), "Sales", "500", "300", false, false);