FusionCharts基于flex的图表组件

版本v3.2.2

首先来个介绍： http://baike.baidu.com/view/2153728.htm，FusionCharts是一个非常之方便能够动态生成多样化图表的组件。

网上对于FusionCharts的资料不是很多，而大部分都只是官方英文的，对于我这种英文白痴很是头疼。下面将自己的使用心得分享并留作以后的查阅。内容不多，但绝对实用！

路径结构
    1.Gallery 自带的图表示例，非常全面

创建图表
    下例中在项目下新建 FusionCharts路径，存放图表所需的swf、js文件

    1.在Charts路径下复制swf文件到 FusionCharts路径。FusionCharts提供了2D、3D、地理、天气等多种SWF文件，可以根据使用情况选择。下例中使用3D图表 Column3D.swf 。

    2.在SourceCode\JavaScript\Legacy路径下复制FusionCharts.js脚本文件到 FusionCharts路径。

    3.在 FusionCharts路径下创建xml数据文件Data.xml

< chart yAxisName ="Sales Figure" caption ="Top 5 Sales Person"
    numberPrefix ="$" showBorder ="1" imageSave ="1" >
    < set label ="Alex" value ="25000" />
    < set label ="Mark" value ="35000" />
    < set label ="David" value ="42300" />
    < set label ="Graham" value ="35300" />
    < set label ="John" value ="31300" />
</ chart >

4.编写index.html测试代码

< html >
    < head >
        < title > My First chart using FusionCharts XT </ title >
        < script type ="text/javascript" src ="FusionCharts/FusionCharts.js" ></ script > //引入的FunsionCharts脚本
    </ head >
    < body >
        < div id ="chartContainer" >
            FusionCharts XT will load here!
        </ div >
        < script type ="text/javascript" >
        
        </ script >
    </ body >
</ html >

5.运行index.html，你将看到如下结果

如何使用配置参数
    参数可以到百度搜索，有比较全面的中文介绍。

    在Gallery 路径下有很多例子供参考。而FusionCharts的参数设置都是在数据文件xml中完成，就是上例中的数据源Data.xml，在不同的标签中写入相应的属性及参数既能得到不同的效果，参数大致包括图表样式的修改、文字样式、数值显示方式、动态效果等。（参数中的布尔值用1或0代替true或false）

动态XML数据（重点）
    上例中给出的是静态的XML文件，对于项目来说数据往往是由后台动态生成的。那么如何使用动态数据呢，例子如下：

    使用jquery ajax异步调用动态xml数据并展示

    js代码，不必理会其他部分，注意：

         1. d a t aType : 'text'，请求的返回数据类型一定是'text'字符串文本类型FusionCharts才能识别，json、xml格式都不可以。但返回的字符串必须是标准的xml格式，至于字符串形式的json格式是否能够识别我没有测试。
         （苦于英文不好，所以我在这里调试了1个多小时，因为FusionCharts能够接收json、xml形式的静态数据源，所以一直没有想到在动态赋值只能接收字符串形式的数据源）

         2. chart.setDataXML(data) ，对于动态数据源不能使用上例中的setXMLUrl()方法。

$.ajax( {
        type : 'POST',
        contentType: " application/json; charset=utf-8 " ,
        url : 'year.action',
        data : parameters,
        dataType : 'text',

        success : function (data) {
            var chart = new FusionCharts( " js/compare/MSColumn3D.swf " , " ChartId " , " 560 " , " 400 " , " 0 " , " 0 " );
            chart.setDataXML(data);
            chart.render( " chartContainer " );
        },

        error : function (xhr) {
            alert('页出错\n\r' + xhr.responseText);
        }
    });

3.数据源格式

String dataChart =
            "<chart palette='1' xaxisname='污染物' yaxisname='排放量' numdivlines='9' caption='2012年对比/同比查询' subcaption='' >" +
            "<categories font='Arial' >" +
                    "<category label='设备1' toolText='North America'/>" +
                    "<category label='设备2' />" +
                    "<category label='设备3' />" +
                    "<category label='设备4' />" +
                    "<category label='设备' />" +

            "</categories>" +
            "<dataset seriesname='B02' color='8BBA00' >" +
                    "<set value='30' />" +
                    "<set value='26' />" +
                    "<set value='29' />" +
                    "<set value='20' />" +
                    "<set value='34' />" +
            "</dataset>" +

            "<dataset seriesname='B01' color='A66EDD' >" +
                    "<set value='10' />" +
                    "<set value='98' />" +
                    "<set value='79' />" +
                    "<set value='73' />" +
                    "<set value='80' />" +
            "</dataset>" +

            "<dataset seriesname='M32' color='F6BD0F' >" +
                    "<set value='27' />" +
                    "<set value='-' />" +
                    "<set value='-' />" +
                    "<set value='-' />" +
                    "<set value='10' />" +
            "</dataset>" +

    "</chart>";

待续……

这里有英文的API和一些FAQ提示，英语好的可以看看：
http://kb.fusioncharts.com/questions/426/What+is+FusionCharts+JavaScript+API%3F

FusionCharts基于flex的图表组件

你可能感兴趣的:(FusionCharts基于flex的图表组件)