FusionChart完全入门手册.doc

FusionChart完全入门手册前言：在翻译FunsionChart V3的时候，发现官方的帮助文档汉化其实是一个很浩大的工程，里面涉及的内容非常多，基本上可以写成一本书了。但是在一些点上，描述又不是很清楚，很多地方只是给出了描述文字，具体使用上的操作或者技巧，就更谈不上了。结合我前一阶段进行的BI项目的情况，结合我本人手头翻译的帮助文档，产生了写一些实例帮助文档的想法，姑且叫做FusionChart完全入门手册吧。一、概述：（略，如果效果好，以后补充）二、 Charts类型FusionCharts总共包含了很多的系列，如l FusionCharts-图表系列l FusionMap -地图系列l FusionWidgets-仪表盘系列l PowerCharts -不好翻译，但是其中最著名的是漏斗，姑且称为漏斗系列吧我们这里介绍的是使用最多，样式也最繁杂的图标系列三、 一个简单的实例一个完整的工程应该包含以下几个部分l 控制文件(如FusionCharts.js，如果需要导出图形还需要FusionChartsExportComponent.js)l 资源文件(swf文件，如Area2D.swf)l 程序文件（如.html /.aspx /.asp/.php/.jsp等）l 数据文件（根据实现方式，此部分可省略，后续进行说明）下面，先看一个简单的例子，本章节如不加说明，默认显示的是2D柱状图（别小看它，2D学会了其他的水到渠成，大家稍安勿躁）代码： 代码 12345FusionChartsv3完全入门手册67891011121314FusionCharts.1516varchart=newFusionCharts(Charts/Column2D.swf,ChartId,500,300,0,0);17chart.setDataURL(Data/Column2D.xml);18chart.render(chartdiv);1920212223242512345FusionChartsv3完全入门手册67891011121314FusionCharts.1516varchart=newFusionCharts(Charts/Column2D.swf,ChartId,500,300,0,0);17chart.setDataURL(Data/Column2D.xml);18chart.render(chartdiv);19202122232425需要说明的是，工程的目录结构如下：程序中的关键行是代码 这里指定了控制文件varchart=newFusionCharts(Charts/Column2D.swf,ChartId,500,300,0,0);chart.setDataURL(Data/Column2D.xml);chart.render(chartdiv);这里指定了控制文件varchart=newFusionCharts(Charts/Column2D.swf,ChartId,500,300,0,0);chart.setDataURL(Data/Column2D.xml);chart.render(chartdiv);这里指定了资源文件和数据文件并用控制文件调用资源文件和数据文件，在页面显示。注意：一定要注意“ChartId”，需要我们在这段代码前已经定义好FusionCharts.你把这段代码放到后面，看看发生什么。对，只显示中的内容，这是初学者非常容易忽略和犯的一个错误。好了，看看效果吧奥妙在什么地方，关键是数据文件，让我们来看看庐山真面貌：代码 这是我们后续学习的重点，在数据文件中如何定义自己想要的值和效果。这里，我们如果想实现平面化的效果，怎么办呢useRoundEdges=0 或者删除useRoundEdges=1见下图，是不是很简单啊。在来一个：如果想让三月份的数据半透明，怎么办今天主要探讨下，数据文件的生成方式，只做探讨。 其实funsioncharts提供了多种数据展现方式，除了前一节采用的直接的DATAFile的方式外，还有官方提供的标准的c#实现方式。看个截图 但是总感觉使用官方提供的InfoSoftGlobal不是很灵活，同时由于在前端的js调用已经做了很大的封装，调用只需要3行代码而已。于是我就考虑能否按照自己的思路封装一个可以在项目中灵活调用的工程。目标要求：1尽量减少服务器端开销2调用简便3扩充容易于是自己写了一个，先说下基本思路 定义一个charts类，里面包含columns lines area pie 等，与funsioncharts提供的图表类型吻合，然后再类中定义一堆的属性，与官方帮助文档中提供的属性对应，然后定义一组方法，来实现把数据生成指定的XML格式（因为不同的图表类型的xml格式不一致，所以需要在不同的类中实现）。调用采用前台调用方式，通过js的dataXML方式提供数据 这是一个官方提供的dataXML方式的工作原理。这里只是对进行了重新封装而已。 下面是工程中的两个截图 下面 前端调用的例子：1protectedvoidPage_Load(objectsender,EventArgse)23if(!Page.IsPostBack)45IOtherother=PageEngine.CreateOther();6DataSetdsMenu=other.GetUserExtInfo(studentinfo.UserID);7LitMenu.Text=Tools.GetMenuList(dsMenu);8910ILearnl=PageEngine.CreateLearn();11DataSetds=l.GetLosePercentByAge();1213Columncolumn=newColumn();14column.BaseFont=宋体;15column.BaseFontSize=12;16column.LogoURL=/images/logo.gif;17column.LogoAlpha=30;18column.UseRoundEdges=1;19column.Caption=各年龄段学生流失率统计;20column.NumberSuffix=%;21column.XAxisName=年龄段;22column.YAxisName=流失率;2324stringScriptStr=varchart1=newFusionCharts(/Charts/Column3D.swf,chart1Id,600,400,0,1);25ScriptStr+=chart1.setDataXML(+column.ColumnsToSingleCharts(ds,column)+);26ScriptStr+=chart1.render(chartview);27ClientScript.RegisterStartupScript(ClientScript.GetType(),Myscript,ScriptStr,true);2829varstrjson=Tools.GetJsonFromDataTable(ds.Tables0).ToString();3031json.Text=strjson;32333435优点：1 可以在前台灵活控制需要表现的图表形式，在我的工程中，设计了可以在前台由用户灵活切换显示的图表类型2 通过属性的处理方式，可以在前台编码过程中，清晰获得类的具体属性。比如显示柱状图的时候，在column.XAxisName的时候可以tool-tip出XAxisName的含义注意事项，给前台编码人提供很大方便，实现了前端和后台类库的分离3 string ScriptStr = var chart1 = new FusionCharts(blogs.co