Posted on 2012-10-24 16:57
谁用我名字啦？ 阅读(1671)
评论(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.数据源格式
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