1. Fusioncharts 介绍：

Fusioncharts是一个基于Flash的图表组件，可以用来提供数据驱动的动态图标，fusioncharts可用于任何网页脚本语言如， HTML格式，JSP技术等等。提供交互式和强大的动态图标，fusioncharts充分利用流体美丽的Flash为模板，使用XML作为其数据接口，创造紧凑，互动和真正的动态图表。

2. 数据接口XML：

Fusioncharts是以XML为数据接口而成图表。提供XML两种形式：直接以XML文件提供数据。基于数据库数据动态生成XML（此方法在后面详细介绍）。

3. 使用前的准备工作（基于java的Web工程为例）：

Ø 拷贝所有的flash文件(所有的图标文件在下载包中Charts 包中)到工程WebRoot目录下，这些flash文件作为生成报表的模板图标。

Ø 拷贝FusionCharts.jsp（下载包Includes包中）文件到WebRoot下（可以将其放在WebRoot下的某个文件夹中），这个文件包含将生成的flash图标嵌入到jsp或者HTML文件中。

Ø 拷贝FusionCharts.js（下载包JSCLASS包中），这个文件提供了createChartHTML函数是我们轻松的创建图表。通过向面的介绍我们基本上可以将FusionCharts实际应用到项目当中。那么如何应用以及注意事项我们将进一步的研究。

4. 创建第一个Chart：

在第三节的基础上我们已经有了基于FusionCharts的开发环境。基于第三节的内容来分析FusionCharts的特性。

Ø 以静态的XML为数据接口创建柱状图或者曲线图。在工程根目录下创建XML文件data.xml此文件的格式为

<chart palette="2" caption="Unit Sales" xAxisName="Month" yAxisName="Units" showValues="0" >

<set label="Jan" value="462" />

<set label="Feb" value="857" />

<set label="Mar" value="671" />

<set label="Apr" value="494" />

<set label="May" value="761" />

<set label="Jun" value="960" />

</chart>

Ø Chart标签中属性：以上结构的xml可以创建单一的柱状和曲线图。每个XML以<chart>为跟标签开始</chart>结束。介绍chart标签中的属性：caption设置图片的标题。xAxisName设置横坐标的标题，yAxisName纵坐标标题（注意：纵坐标的标题只能为英文），showValues值为boolen型0为在柱子或者曲线上不显示数据，“1”为显示数据。Chart标签中有很多相关的属性例如数据格式，特殊字符的转化，我们可以参考FusionCharts的帮助文件根据需要进行设置，这里不一一介绍

Ø 以上XML<set>子标签：label为横坐标的元素， value为每个很坐标元素对应的值。

Ø 当我们了解了XML文件的内容就可以生成图片了：创建一个JSP文件。将FusionCharts.jsp文件包含进来。编辑JSP文件

<%@ include file="../Includes/FusionCharts.jsp"%>
<HTML>
   <HEAD>
      <TITLE>FusionCharts - Simple Column 3D Chart</TITLE> 
   </HEAD>
   <BODY>
   <%
 String chartHTMLCode=createChartHTML("/FusionCharts/Column3D.swf", " Data.xml", "", "myFirst", 600, 300, false) ;
   %>
   <%=chartHTMLCode%>
   </BODY>
</HTML>

FusionCharts.jsp文件提供了createChartHTML（）函数来创建图片方法中的共有七个参数，一次介绍：1：要引用flash文件的的路径不同的图片引用不同的flash文件，2：为xml文件的路径，3当动态的生成XMl文件时要传的参数，在此如果物理路径中有XMl文件的话第二个参数传文件路径，第三个参数为空，当物理路径中没有xml文件 而是程序生成的话，第二个参数为空，第三个参数为程序生成xml的字符串。4：生成图片的id，5，6为图片的 width hight。7：图片是否为调试模式。通过以上的代码就可以生成简单的chart图了。现在运行web服务器可以看到图片

5. FusionCharts提供多样式图：

在我们的实际应用当中会涉及到复合图标，以及柱状图和曲线图的混合。那这些主要是XML文件的结构的差异以及应用不同的flash文件

Ø 复合图的生成注意事项：

(多柱状）

(多曲线)

（堆状图）

上面两个图的XML结构相同引用不同的Flash文件：

<chart palette='2' caption='各个地市第一季度绩效对比' xAxisName='地市' yAxisName='绩效数据' showValues='0' decimals='0' formatNumberScale='0' useRoundEdges='1'>

<categories>

<category label='成都'/>

<category label='德阳'/>

...

</categories>

<dataset seriesName='一月'>

<set value='233' link='n-/chartDemo/turn.do?value=233 '/>

<set value='448' link='n-/chartDemo/turn.do?value=448 '/>

...

</dataset>

<dataset seriesName='二月'>

<set value='755'/>

<set value='543'/>

...

</dataset><dataset seriesName='三月'>

<set value='656'/>

<set value='567'/>

...

</dataset>

</chart>

次结构的XML，chart根元素在第四节中介绍过了，接下来介绍chart的子节点<categories></categories>这个子节点包含了子节点多个<category label=“成都”></ category>用来设置图片横坐标的元素，label属性来设置显示的元素。<dataset seriesName='一月'>子节点为一个元素中有几个柱子或曲线就有几个<dataset seriesName='一月'>标签，如上图为统计各个地市一月，二月，三月分别的绩效数据。那么就有三个<dataset>标签，标签中seriesName 属性可以在横坐标下边形成一组图片（如上图）说明了不同颜色的柱子曲线表示的不同的数据。<dataset>里有子节点<set>和第四节中一样的功能。当鼠标移到某个柱子或者曲线的坐标点上时显示如图数据（一月 成都 绩效数据是233）

Ø 生成下图柱状和曲线图

的XML的结构为：

<chart palette='2' caption='各个地市第一季度绩效对比' xAxisName='地市' yAxisName='绩效数据' showValues='0' decimals='0' formatNumberScale='0' useRoundEdges='1'>

<categories><

category label='成都'/>

<category label='德阳'/>

...

</categories>

<dataset seriesName='一月'>

<set value='877' link='n-/chartDemo/turn.do?value=成都 '/>

<set value='644' link='n-/chartDemo/turn.do?value=德阳 '/>

...

</dataset>

<dataset seriesName='二月' renderAs='Line'>

<set value='755' link='n-/chartDemo/turn.do?value=877 '/>

<set value='408' link='n-/chartDemo/turn.do?value=644 '/>

...

</dataset>

<trendlines>

<line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/><

/trendlines>

</chart>

和上面的多柱状和多曲线的结构基本相同，区别为要那个<dataset seriesName='二月>的值以曲线的形式展示设置那个<dataset seriesName='二月' renderAs='Line'>增加了属性renderAs=‘Line’

6. FusionCharts的高级特性：

Ø 热点：FusionCharts也支持获取给每个数据元素的热点数据。在<set >标签提供属性link可以解决热点的问题，在上面XML文档结构中也看到了关于link的信息。   在此详细介绍  。 链接的形式：a ：<set  …   link=’ /chartDemo/link.jso?value=999> 链接到本页面，b：<set  …   link=’ n-/chartDemo/link.jso?value=999>加了前缀n-链接到另一个页面。c：<set  …   link=’ 'P-detailsPopUp,width=400,height=300,toolbar=no,    scrollbars=no,resizable=no-/chartDemo/link.jso?value=999>弹出新窗口增加了弹出窗口属性设置的信息。

Ø 热点中参数的传递：因为在XML中对特殊字符？ & 不能识别FusionCharts对特殊字符提供了转义的支持所以在上面的link 参数传递改为<set  …   link=’ /chartDemo/link.jso%3Fvalue%3D999> 要是在传一个参数是就得用&了

<set  …   link=’ /chartDemo/link.jso%3Fvalue%3D999%26name=成都>

ó <set  …   link=’ /chartDemo/link.jsp?value=999&name=成都>

当鼠标移至图片时就会变为手型，点击链接到link.jsp中，在jsp中得到传过来的参数将显示图片某个元素的信息。现在为止只能传两个参数，要传多个参数时将参数追加为一个字符串用逗号分隔，在link.jsp中通过split 一一将参数取出。

Ø 整个图片作为热点：在chart标签中设置属性  clickRUL='n-http://www.infosoftglobal.com’要是给整个图片设置了热点，那么在每个图片元素设置的热点将不起作用。

Ø 保存Chart为一个图片：要保存chart为图片，在下载的包ImageSaving中拷贝文件FusionChartsSave.jsp 这个文件提供了如何将chart以流的输出在指定的路径下，文件考好了在设置chart属性<chart.. imageSave='1' imageSaveURL='Path/FusionChartsSave.jsp '  imageSaveDialogFontColor =‘cfbbfc’> imageSave为boolean型‘1’为保存chart为image ‘0’为不保存。imageSaveURL为FusionChartsSave.jsp的路径。imageSaveDialogFontColor 保存chart时进度条的颜色。设置好以后右击鼠标可以看到如图：

进度条为100%是弹出对话框选择保存图片的路径。

Ø Chart图标题字体 大小 颜色的设置：<chart ...>中提供属性可以设置，<chart baseFont='Arial' baseFontSize ='12' baseFontColor ='000000' >

Ø Chart图二级标题设置<chart.. subCaption='Figures in USD' >

Ø 纵坐标的标题如果是汉字是只能平行线是 ，不能旋转显示。

Ø 要给标题 二级标题 横坐标 纵坐标分别设置字体 大小颜色的话在chart跟标签中加样式如

<chart>

<styles>
        <definition>
            <style name='myCaptionFont' type='font' font='Arial' size='14' color='666666' bold='1' underline='1'/>
            <style name='mySubCaptionFont' type='font' font='Arial' size='12' color='666666' italic='1'/>
            <style name='myAxisTitlesFont' type='font' font='Arial' size='11' bold='1'/>
        </definition>
        <application>
            <apply toObject='Caption' styles='myCaptionFont' />
            <apply toObject='SubCaption' styles='mySubCaptionFont' />
            <apply toObject='XAxisName' styles='myAxisTitlesFont' />
        </application>
    </styles>

</chart>组件帮助文档中有详细的说明

7. FusionCharts提供了很多设置chart样式的属性：数据显示格式，以及数据精确度，标题的设置，图片的现实格式。在帮助文件中有很多。这就不罗列了。通过以上的七节，一般的常用的图片很容易生成的。

8. 动态XML生成的chart：在上面的例子中主要以静态的XML为主，那我们在应用当中一般是从数据库中得到一个集合。这需要我们通过程序将需要的数据装入XML中，此XMl将为一个字符串。在第四节中将第二个参数为空第三个参数为我们生成的strXML字符串chartHTMLCode=createChartHTML("/FusionCharts/Column3D.swf", "", "strXML", "myFirst", 600, 300, false) ;

9. FusionCharts的优缺点：

Ø 优点：基于XML数据格式。对代码稍稍加工一下，让数据以XML格式做为参数传递就可以得到FLASH图表呈现。有单一系列(Single series)呈现，也有多样系列(Multi-series)呈现。有3D或2D的栏状、饼形、块形或线形呈现。甚至可以线形与栏状综合呈现，而且使用不难。

Ø 缺点：试用版没有提供源码，使得有的功能不能实现，如导致现在中文乱码无法解决（在源码中提供了支持各种语言的功能），而且价格太贵

FusionCharts的使用入门的更多相关文章

  1. 【FusionCharts学习-1】获取资源

    网址 官网: http://www.fusioncharts.com/charts/  入门学习:http://www.fusioncharts.com/dev/usage-guide/getting ...

  2. FusionCharts xml入门教程

    由于项目需求需要做一个报表,选择FusionCharts作为工具使用.由于以 前没有接触过报表,网上也没有比较详细的fusionCharts教程,所以决定好好研究FusionCharts,同时做一个比 ...

  3. Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  4. ABP入门系列（1）——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  5. Oracle分析函数入门

    一.Oracle分析函数入门 分析函数是什么?分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计 ...

  6. Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  7. Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  8. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  9. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

随机推荐

  1. Android 学习手札（备注）

    1.在Android 应用程序中不能使用System.out.println(..)来输出信息,而要使用Log类中的静态方法输出调试信息. Log.d("onStart", &qu ...

  2. EasyUI 1.3之前DataGrid中动态选中、获取Checkbox

    这几天做项目,由于项目中用到的EasyUI版本过低,不能使用自带操作DataGrid中CheckBox的方法. 所以自己写了一个临时方案: 根据ID集合选中所属行的CheckBox: data={1, ...

  3. cocos2dx-html5 实现网页版flappy bird游戏

    我也是第一次使用cocos2d_html5,对js和html5也不熟,看引擎自带的例子和引擎源码,边学边做,如果使用过cocos2d-x的话,完成这个游戏还是十分简单的.游戏体验地址: http:// ...

  4. 十月例题F题 - City Game

    F - City Game Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Bob is a st ...

  5. 为什么Tomcat的webapps目录下新建的目录不能访问html文件？

    在Tomcat安装目录中,webapps默认为部署网站用的目录.webapps/ROOT是网站的根目录,其它目录都是网站的子目录,如webapps\jsp-examples目录.但是,当我们新建一个子 ...

  6. JSP HTML区别

    1.最简单的区别就是,HTML能直接打开,jsp只能发布到Tomact等服务器上才能打开2.定义上HTML页面是静态页面可以直接运行,JSP页面是动态页它运行时需要转换成servlet.3.他们的表头 ...

  7. Java中间件

    传统的HTML已经满足不了如今web系统的诸多的功能需求,建立一个交互式的Web,便诞生了各种Web开发语言,如ASP,JSP,PHP等,这些语言与传统的语言有着密切的联系,如JSP基于Java语言. ...

  8. 关于win8.1“连接被远程计算机关闭”的一种解决方案

    我就是连接的时候出现"连接被远程计算机关闭",然后想着可能是win8更新之后网络协议 出问题了,后来无意中发现e信在第一次启动的时候会在网络适配器中会多出很多网卡,其中三个是带感叹 ...

  9. 如何使用SplitContainer控件[转]

    原文地址:http://yinzhihua2008.blog.163.com/blog/static/794306720120511150457/ 在Windows资源管理器中,当把鼠标指针移动到Tr ...

  10. [BZOJ 3207] 花神的嘲讽计划Ⅰ【Hash + 可持久化线段树】

    题目链接:BZOJ - 3207 题目分析 先使用Hash,把每个长度为 k 的序列转为一个整数,然后题目就转化为了询问某个区间内有没有整数 x . 这一步可以使用可持久化线段树来做,虽然感觉可以有更 ...