FusionChart完全入門手冊_第1頁
FusionChart完全入門手冊_第2頁
FusionChart完全入門手冊_第3頁
FusionChart完全入門手冊_第4頁
FusionChart完全入門手冊_第5頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

1、FusionChart完全入門手冊前言： 在翻譯FunsionChart V3的時候，發(fā)現(xiàn)官方的幫助文檔漢化其實是一個很浩大的工程，里面涉及的內(nèi)容非常多，基本上可以寫成一本書了。但是在一些點上，描述又不是很清楚，很多地方只是給出了描述文字，具體使用上的操作或者技巧，就更談不上了。結(jié)合我前一階段進(jìn)行的BI項目的情況，結(jié)合我本人手頭翻譯的幫助文檔，產(chǎn)生了寫一些實例幫助文檔的想法，姑且叫做FusionChart完全入門手冊吧。  一、概述：（略，如果效果好，以后補充）二、        &#

2、160;    Charts類型FusionCharts總共包含了很多的系列，如l         FusionCharts - 圖表系列l(wèi)         FusionMap    - 地圖系列l(wèi)         FusionWidgets - 儀

3、表盤系列l(wèi)         PowerCharts   - 不好翻譯，但是其中最著名的是漏斗，姑且稱為漏斗系列吧 我們這里介紹的是使用最多，樣式也最繁雜的圖標(biāo)系列  三、             一個簡單的實例一個完整的工程應(yīng)該包含以下幾個部分l        

4、; 控制文件(如FusionCharts.js，如果需要導(dǎo)出圖形還需要FusionChartsExportComponent.js)l         資源文件(swf文件，如Area2D.swf)l         程序文件（如.html /.aspx /.asp/.php/.jsp等）l         數(shù)據(jù)文件（根據(jù)實現(xiàn)方式，此部分可省略，后續(xù)進(jìn)行說明

5、）下面，先看一個簡單的例子，本章節(jié)如不加說明，默認(rèn)顯示的是2D柱狀圖（別小看它，2D學(xué)會了其他的水到渠成，大家稍安勿躁）代碼：     代碼  1  <!> 2 <html xmlns 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

6、> 5 <title>FusionCharts v3 完全入門手冊</title> 6 <link rel="stylesheet" href="style/Style.css" type="text/css" /> 7 <script language="JavaScript" src="JSClass/FusionC

7、harts.js"></script> 8 </head> 9 10 <body>11 <table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">12   <tr> 13

8、0;    <td valign="top" class="text" align="center"> <div id="chartdiv" align="center"> 14         FusionCharts. </div>15 &

9、#160;     <script type="text/javascript">16            var chart = new FusionCharts("Charts/Column2D.swf", "ChartId", "500", &quo

10、t;300", "0", "0");17            chart.setDataURL("Data/Column2D.xml");           18         

11、60;  chart.render("chartdiv");19         </script> </td>20   </tr>21   22 </table>23 </body>24 </html>25  1 <!> 2 <

12、html xmlns 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>FusionCharts v3 完全入門手冊</title> 6 <link rel="stylesheet" h

13、ref="style/Style.css" type="text/css" /> 7 <script language="JavaScript" src="JSClass/FusionCharts.js"></script> 8 </head> 9 10 <body>11 <table width="98%"

14、 border="0" cellspacing="0" cellpadding="3" align="center">12   <tr> 13     <td valign="top" class="text" align="center"> <div&

15、#160;id="chartdiv" align="center"> 14         FusionCharts. </div>15       <script type="text/javascript">16        

16、;    var chart = new FusionCharts("Charts/Column2D.swf", "ChartId", "500", "300", "0", "0");17            chart.set

17、DataURL("Data/Column2D.xml");           18            chart.render("chartdiv");19         </script> </td&g

18、t;20   </tr>21   22 </table>23 </body>24 </html>25  需要說明的是，工程的目錄結(jié)構(gòu)如下：  程序中的關(guān)鍵行是 代碼 <script language="JavaScript" src="JSClass/FusionCharts.js"></script>這里指定了控制文件<

19、;script type="text/javascript">           var chart = new FusionCharts("Charts/Column2D.swf", "ChartId", "500", "300", "0", "0&

20、quot;);           chart.setDataURL("Data/Column2D.xml");                      chart.render("chartdiv");</script&

21、gt;<script language="JavaScript" src="JSClass/FusionCharts.js"></script>這里指定了控制文件<script type="text/javascript">           var chart = new FusionCharts("Char

22、ts/Column2D.swf", "ChartId", "500", "300", "0", "0");           chart.setDataURL("Data/Column2D.xml");         

23、;             chart.render("chartdiv");</script>  這里指定了資源文件和數(shù)據(jù)文件并用控制文件調(diào)用資源文件和數(shù)據(jù)文件，在頁面顯示。注意：一定要注意“ChartId”，需要我們在這段代碼前已經(jīng)定義好 <div id="chartdiv" align="center">  

24、FusionCharts. </div>  你把這段代碼放到<script></script>后面，看看發(fā)生什么。對，只顯示<div>中的內(nèi)容，這是初學(xué)者非常容易忽略和犯的一個錯誤。 好了，看看效果吧 奧妙在什么地方，關(guān)鍵是數(shù)據(jù)文件，讓我們來看看廬山真面貌： 代碼 <chart palette='2' caption='月度銷售額' xAxisName='月度' yAxisName='單

25、位(臺)' showValues='0' decimals='0' formatNumberScale='0' useRoundEdges='1' baseFont='宋體' baseFontSize='12'><set label='一月' value='462' /><set label='二月' value

26、='857' /><set label='三月' value='671' /><set label='四月' value='494' /><set label='五月' value='761' /><set label='六月' value='960' /></ch

27、art> <chart palette='2' caption='月度銷售額' xAxisName='月度' yAxisName='單位(臺)' showValues='0' decimals='0' formatNumberScale='0' useRoundEdges='1' baseFont='宋體' baseFontSize

28、='12'><set label='一月' value='462' /><set label='二月' value='857' /><set label='三月' value='671' /><set label='四月' value='494' /><set la

29、bel='五月' value='761' /><set label='六月' value='960' /></chart> 這是我們后續(xù)學(xué)習(xí)的重點，在數(shù)據(jù)文件中如何定義自己想要的值和效果。這里，我們?nèi)绻雽崿F(xiàn)平面化的效果，怎么辦呢useRoundEdges='0' 或者刪除useRoundEdges='1'見下圖，是不是很簡單啊。在來一個：如果想讓三月份的數(shù)據(jù)半透明，怎么辦<set label='

30、三月' value='671' alpha='20' /> 今天主要探討下，數(shù)據(jù)文件的生成方式，只做探討。  <!-endif->其實funsioncharts提供了多種數(shù)據(jù)展現(xiàn)方式，除了前一節(jié)采用的直接的DATAFile的方式外，還有官方提供的標(biāo)準(zhǔn)的c#實現(xiàn)方式?？磦€截圖   <!-endif->但是總感覺使用官方提供的InfoSoftGlobal不是很靈活，同時由于在前端的js調(diào)用已經(jīng)做了很大的封裝，調(diào)用只需要3行代碼而已。于是我就考慮能否按照自己的思路封裝一個可以在項目中靈活調(diào)用

31、的工程。目標(biāo)要求：1 盡量減少服務(wù)器端開銷2 調(diào)用簡便3 擴(kuò)充容易于是自己寫了一個，先說下基本思路       <!-endif->定義一個charts類，里面包含columns lines area pie 等，與funsioncharts提供的圖表類型吻合，然后再類中定義一堆的屬性，與官方幫助文檔中提供的屬性對應(yīng)，然后定義一組方法，來實現(xiàn)把數(shù)據(jù)生成指定的XML格式（因為不同的圖表類型的xml格式不一致，所以需要在不同的類中實現(xiàn)）。調(diào)用采用前臺調(diào)用方式，通過js的dataXML方式提供數(shù)據(jù)&

32、#160;       <!-endif->這是一個官方提供的dataXML方式的工作原理。這里只是對進(jìn)行了重新封裝而已。     下面是工程中的兩個截圖        下面 <!-endif->前端調(diào)用的例子：    1 protected void Page_Load(object sender, EventArgs e)

33、0;2      3         if (!Page.IsPostBack) 4          5             IOther other = Page

34、Engine.CreateOther(); 6             DataSet dsMenu = other.GetUserExtInfo(studentinfo.UserID); 7             LitMenu.Text = Tools.GetMe

35、nuList(dsMenu); 8              9             10             ILearn l = PageEngin

36、e.CreateLearn();11             DataSet ds = l.GetLosePercentByAge();12 13             Column column = new Column();14  &

37、#160;          column.BaseFont = "宋體"15             column.BaseFontSize = "12"16           

38、;  column.LogoURL = "/images/logo.gif"17             column.LogoAlpha = "30"18             column.UseRoundEdges =&#

39、160;"1"19             column.Caption = " 各年齡段學(xué)生流失率統(tǒng)計"20             column.NumberSuffix = "%"21   &#

40、160;         column.XAxisName = "年齡段"22             column.YAxisName = "流失率"23 24             string ScriptStr = 25             ScriptStr += "chart1.setDataXML("" + column.Columns

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論