FusionChart完全入门手册_第1页
FusionChart完全入门手册_第2页
FusionChart完全入门手册_第3页
FusionChart完全入门手册_第4页
FusionChart完全入门手册_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、FusionChart完全入门手册前言： 在翻译FunsionChart V3的时候，发现官方的帮助文档汉化其实是一个很浩大的工程，里面涉及的内容非常多，基本上可以写成一本书了。但是在一些点上，描述又不是很清楚，很多地方只是给出了描述文字，具体使用上的操作或者技巧，就更谈不上了。结合我前一阶段进行的BI项目的情况，结合我本人手头翻译的帮助文档，产生了写一些实例帮助文档的想法，姑且叫做FusionChart完全入门手册吧。  一、概述：（略，如果效果好，以后补充）二、        &#

2、160;    Charts类型FusionCharts总共包含了很多的系列，如l         FusionCharts - 图表系列l         FusionMap    - 地图系列l         FusionWidgets - 仪

3、表盘系列l         PowerCharts   - 不好翻译，但是其中最著名的是漏斗，姑且称为漏斗系列吧 我们这里介绍的是使用最多，样式也最繁杂的图标系列  三、             一个简单的实例一个完整的工程应该包含以下几个部分l        

4、; 控制文件(如FusionCharts.js，如果需要导出图形还需要FusionChartsExportComponent.js)l         资源文件(swf文件，如Area2D.swf)l         程序文件（如.html /.aspx /.asp/.php/.jsp等）l         数据文件（根据实现方式，此部分可省略，后续进行说明

5、）下面，先看一个简单的例子，本章节如不加说明，默认显示的是2D柱状图（别小看它，2D学会了其他的水到渠成，大家稍安勿躁）代码：     代码  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  需要说明的是，工程的目录结构如下：  程序中的关键行是 代码 <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>  这里指定了资源文件和数据文件并用控制文件调用资源文件和数据文件，在页面显示。注意：一定要注意“ChartId”，需要我们在这段代码前已经定义好 <div id="chartdiv" align="center">  

24、FusionCharts. </div>  你把这段代码放到<script></script>后面，看看发生什么。对，只显示<div>中的内容，这是初学者非常容易忽略和犯的一个错误。 好了，看看效果吧 奥妙在什么地方，关键是数据文件，让我们来看看庐山真面貌： 代码 <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> 这是我们后续学习的重点，在数据文件中如何定义自己想要的值和效果。这里，我们如果想实现平面化的效果，怎么办呢useRoundEdges='0' 或者删除useRoundEdges='1'见下图，是不是很简单啊。在来一个：如果想让三月份的数据半透明，怎么办<set label='

30、三月' value='671' alpha='20' /> 今天主要探讨下，数据文件的生成方式，只做探讨。  <!-endif->其实funsioncharts提供了多种数据展现方式，除了前一节采用的直接的DATAFile的方式外，还有官方提供的标准的c#实现方式。看个截图   <!-endif->但是总感觉使用官方提供的InfoSoftGlobal不是很灵活，同时由于在前端的js调用已经做了很大的封装，调用只需要3行代码而已。于是我就考虑能否按照自己的思路封装一个可以在项目中灵活调用

31、的工程。目标要求：1 尽量减少服务器端开销2 调用简便3 扩充容易于是自己写了一个，先说下基本思路       <!-endif->定义一个charts类，里面包含columns lines area pie 等，与funsioncharts提供的图表类型吻合，然后再类中定义一堆的属性，与官方帮助文档中提供的属性对应，然后定义一组方法，来实现把数据生成指定的XML格式（因为不同的图表类型的xml格式不一致，所以需要在不同的类中实现）。调用采用前台调用方式，通过js的dataXML方式提供数据&

32、#160;       <!-endif->这是一个官方提供的dataXML方式的工作原理。这里只是对进行了重新封装而已。     下面是工程中的两个截图        下面 <!-endif->前端调用的例子：    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 = " 各年龄段学生流失率统计"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. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论