:: 首页 :: 新随笔 ::  :: 聚合  :: 管理

FusionCharts基于flex的图表组件

Posted on 2012-10-24 16:57 谁用我名字啦? 阅读(1678) 评论(0)  编辑  收藏 所属分类: 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">
       
<!--
           
var myChart = new FusionCharts( "FusionCharts/Column3D.swf"//设置swf文件路径
                   
"myChartId", "400", "300", "0", "1" );
            myChart.setXMLUrl(
"FusionCharts/Data.xml"); //设置xml文件路径
            myChart.render(
"chartContainer"); //显示图表的容器ID,上面的div
       
// -->
        </script>
   
</body>
</html>

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


如何使用配置参数
    参数可以到百度搜索,有比较全面的中文介绍。
    
    在Gallery 路径下有很多例子供参考。而FusionCharts的参数设置都是在数据文件xml中完成,就是上例中的数据源Data.xml,在不同的标签中写入相应的属性及参数既能得到不同的效果,参数大致包括图表样式的修改、文字样式、数值显示方式、动态效果等。(参数中的布尔值用1或0代替true或false)

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

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

    js代码,不必理会其他部分,注意:
        
        1.dataType : '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.数据源格式


    待续……

这里有英文的API和一些FAQ提示,英语好的可以看看:

http://kb.fusioncharts.com/questions/426/What+is+FusionCharts+JavaScript+API%3F

只有注册用户登录后才能发表评论。


网站导航: