今天主要探討下，數據文件的生成方式，只做探討。

?

其實funsioncharts提供了多種數據展現方式，除了前一節采用的直接的DATAFile的方式外，還有官方提供的標準的c#實現方式。

看個截圖

?

?

但是總感覺使用官方提供的InfoSoftGlobal不是很靈活，同時由于在前端的js調用已經做了很大的封裝，調用只需要3行代碼而已。于是我就考慮能否按照自己的思路封裝一個可以在項目中靈活調用的工程。

目標要求：

1．?盡量減少服務器端開銷

2．?調用簡便

3．?擴充容易

于是自己寫了一個，先說下基本思路

?

?????

定義一個charts類，里面包含columns lines area pie 等，與funsioncharts提供的圖表類型吻合，然后再類中定義一堆的屬性，與官方幫助文檔中提供的屬性對應，然后定義一組方法，來實現把數據生成指定的XML格式（因為不同的圖表類型的xml格式不一致，所以需要在不同的類中實現）。

調用采用前臺調用方式，通過js的dataXML方式提供數據

????

?

?

這是一個官方提供的dataXML方式的工作原理。這里只是對①進行了重新封裝而已。

???? 下面是工程中的兩個截圖

? ? ?

?

?

下面

前端調用的例子：

?

?

?

?1?protected?void?Page_Load(object?sender,?EventArgs?e)
?2?????{
?3?????????if?(!Page.IsPostBack)
?4?????????{
?5?????????????IOther?other?=?PageEngine.CreateOther();
?6?????????????DataSet?dsMenu?=?other.GetUserExtInfo(studentinfo.UserID);
?7?????????????LitMenu.Text?=?Tools.GetMenuList(dsMenu);
?8?????????????
?9?????????????
10?????????????ILearn?l?=?PageEngine.CreateLearn();
11?????????????DataSet?ds?=?l.GetLosePercentByAge();
12?
13?????????????Column?column?=?new?Column();
14?????????????column.BaseFont?=?"宋體";
15?????????????column.BaseFontSize?=?"12";
16?????????????column.LogoURL?=?"/images/logo.gif";
17?????????????column.LogoAlpha?=?"30";
18?????????????column.UseRoundEdges?=?"1";
19?????????????column.Caption?=?"?各年齡段學生流失率統計";
20?????????????column.NumberSuffix?=?"%";
21?????????????column.XAxisName?=?"年齡段";
22?????????????column.YAxisName?=?"流失率";
23?
24?????????????string?ScriptStr?=?@"var?chart1?=?new?FusionCharts('http://www.cnblogs.com/Charts/Column3D.swf',?'chart1Id',?'600',?'400',?'0',?'1');";
25?????????????ScriptStr?+=?"chart1.setDataXML(\""?+?column.ColumnsToSingleCharts(ds,?column)?+?"\");";
26?????????????ScriptStr?+=?"chart1.render('chartview');";
27?????????????ClientScript.RegisterStartupScript(ClientScript.GetType(),?"Myscript",?ScriptStr,?true);
28?
29?????????????var?strjson?=?Tools.GetJsonFromDataTable(ds.Tables[0]).ToString();
30?
31?????????????json.Text?=?strjson;
32?
33?????????}
34?????}
35?

?

優點：

1．?????????????? 可以在前臺靈活控制需要表現的圖表形式，在我的工程中，設計了可以在前臺由用戶靈活切換顯示的圖表類型

2．?????????????? 通過屬性的處理方式，可以在前臺編碼過程中，清晰獲得類的具體屬性。比如顯示柱狀圖的時候，在column.XAxisName的時候可以tool-tip出XAxisName的含義注意事項，給前臺編碼人提供很大方便，實現了前端和后臺類庫的分離

3．?????????????? ?

string ScriptStr = @"var chart1 = new FusionCharts('http://www.cnblogs.com/Charts/Column3D.swf', 'chart1Id', '600', '400', '0', '1');";

這里后來做了優化，因為2D和3D調用的swf文件不同，封裝了一個方法，自動獲得需要調用的swf文件

由于現在工程是08的，換了新Comp后工程只有03和05，現在工程轉換還有點問題，在教程的最后我會提供一個完整的例子，先賣個關子，這里留待大家思考。

?

?

?

?

?

?

總結

以上是生活随笔為你收集整理的FusionChart完全入门手册 -2的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。