FusionCharts Team 是家印度公司，大家可以去他们官网http://www.fusioncharts.com/
他们出品了很多工具，虽然统称为FusionCharts，但是这套flash图表控件包含以下的内容：
1、flash图表控件(FusionCharts)
2、flash地图控件(FusionMaps)
3、flash压力表控件(FusionWidgets)
4、flash电源图(PowerCharts)
另外他们有free版本的控件，可以免费使用，Evaluation版本是增强版本，不但图表漂亮了很多，功能也提升了不少，只是图表上有他们公司的标志而已，也因此，强大的国人发了很多破解版。
最近接触FusionChart图表控件，用的还是旧版，有空看了下新版3.2，发现从3.2开始已经不再是只支持xml格式数据了，同时提供了xml和json格式的支持，图表展示方面也提供了javascript的展示，这点让我之前想使用类似Extjs、dojo等js包简单替代FusionCharts的念头彻底抛开了。
使用Javascript输出的方式类型基本与flash方式的类型名相匹配，如：使用Column 3D的效果，flash为Column3D.swf，Javascript则为Column 3D。
数据格式方面，如图所示示例图表：
传统xml格式数据源如下：
<chart caption="Country Comparison" showLabels="1" showvalues="0" decimals="0" numberPrefix="$"> <categories><category label="Austria"></category><category label="Brazil"></category><category label="France"></category><category label="Germany"></category><category label="USA"></category></categories> <dataset seriesName="1996" color="AFD8F8" showValues="0"> <set value="25601.34"></set> <set value="20148.82"></set> <set value="17372.76"></set> <set value="35407.15"></set> <set value="38105.68"></set> </dataset> <dataset seriesName="1997" color="F6BD0F" showValues="0"> <set value="57401.85"></set> <set value="41941.19"></set> <set value="45263.37"></set> <set value="117320.16"></set> <set value="114845.27"></set> </dataset> <dataset seriesName="1998" color="8BBA00" showValues="0"> <set value="45000.65"></set> <set value="44835.76"></set> <set value="18722.18"></set> <set value="77557.31"></set> <set value="92633.68"></set> </dataset> </chart>
JSON格式数据源如下：
{
"chart": {
"caption": "Country Comparison",
"showlabels": "1",
"showvalues": "0",
"decimals": "0",
"numberprefix": "$"
},
"categories": [
{
"category": [
{
"label": "Austria"
},
{
"label": "Brazil"
},
{
"label": "France"
},
{
"label": "Germany"
},
{
"label": "USA"
}
]
}
],
"dataset": [
{
"seriesname": "1996",
"color": "AFD8F8",
"showvalues": "0",
"data": [
{
"value": "25601.34"
},
{
"value": "20148.82"
},
{
"value": "17372.76"
},
{
"value": "35407.15"
},
{
"value": "38105.68"
}
]
},
{
"seriesname": "1997",
"color": "F6BD0F",
"showvalues": "0",
"data": [
{
"value": "57401.85"
},
{
"value": "41941.19"
},
{
"value": "45263.37"
},
{
"value": "117320.16"
},
{
"value": "114845.27"
}
]
},
{
"seriesname": "1998",
"color": "8BBA00",
"showvalues": "0",
"data": [
{
"value": "45000.65"
},
{
"value": "44835.76"
},
{
"value": "18722.18"
},
{
"value": "77557.31"
},
{
"value": "92633.68"
}
]
}
]
}
对比看来，JSON格式的数据似乎更简单明确和便于构造。
至于使用，方式一样，同样简单的几行Javascript即可展示数据，如下：
if (GALLERY_RENDERER && GALLERY_RENDERER.search(/javascript|flash/i)==0) FusionCharts.setCurrentRenderer(GALLERY_RENDERER);
var chart = new FusionCharts("../../Charts/MSColumn3D.swf", "ChartId", "560", "400", "0", "0");
chart.setXMLData( dataString );
chart.render("chartdiv");
这里有四行，较之前多了一行if语句，用来判断是使用Javascript还是flash，实际应用中改行依然可以忽略。
下面提出上图中示例的全部HTML源代码，有更多需要可以到官网下载包含api文档的发布包，这里不再一一介绍。
< ?xml version="1.0" encoding="iso-8859-1"?>< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Single Series Column 2D Chart</title>
<link href="../assets/ui/css/style.css" rel="stylesheet" type="text/css" />
<link href="../assets/prettify/prettify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../Charts/jquery.min.js"></script>
<script type="text/javascript" src="../../Charts/FusionCharts.js"></script>
<script type="text/javascript" src="../assets/prettify/prettify.js"></script>
<script type="text/javascript" src="../assets/ui/js/json2.js"></script>
<script type="text/javascript" src="../assets/ui/js/lib.js" ></script>
<!--[if IE 6]>
<script type="text/javascript" src="../assets/ui/js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
/* select the element name, css selector, background etc */
DD_belatedPNG.fix('img');
/* string argument can be any CSS selector */
</script>
<p> </p>
<p align="center"></p>
< ![endif]-->
</head>
<body>
<h3 class="chart-title" >Single Series Column 2D Chart</h3>
<p> </p>
<script type="text/javascript" src="../Data/String/js/Col2D1.js" ></script>
<div id="chartdiv" align="center">Chart will load here</div>
<script type="text/javascript">
if (GALLERY_RENDERER && GALLERY_RENDERER.search(/javascript|flash/i)==0) FusionCharts.setCurrentRenderer(GALLERY_RENDERER);
var chart = new FusionCharts("../../Charts/Column2D.swf", "ChartId_flash", "560", "400", "0", "1" );
chart.setXMLData( dataString );
chart.render("chartdiv");
</script>
<p> </p>
<p align="center">Simple Column 2D chart showing top 5 sales person of the year</p>
<p> </p>
<div class="qua-button-holder"></div>
<div class="show-code-block"></div>
</body>
</html>
值得一提的是，3.2版的FusionCharts实现Drill Down不再是单一的Link来实现多个报表的跳转了，新增了LinkedCharts概念。
可以使用setXMLUrl来实现Drill Down。如下：
var myChart = new FusionCharts( "FusionCharts/Column2D.swf", "myChartId", "320", "250", "0", "1" );
myChart.setXMLUrl("summary-data.xml");
myChart.render("chartContainer");
linkeddata的格式也不太一样，如：
xml格式：
<chart caption="Yearly sales" xAxisName="Year" yAxisName="Sales">
<set label="2004" value="37800" link="newchart-xml-2004-quarterly"></set>
<set label="2005" value="21900" link="newchart-xml-2005-quarterly"></set>
<set label="2006" value="32900" link="newchart-xml-2006-quarterly"></set>
<set label="2007" value="39800" link="newchart-xml-2007-quarterly"></set>
<linkeddata id="2004-quarterly">
<chart caption="Quarterly Sales Summary" subcaption="For the year 2004"
xAxisName="Quarter" yAxisName="Sales" >
<set label="Q1" value="11700"></set>
<set label="Q2" value="8600"></set>
<set label="Q3" value="6900"></set>
<set label="Q4" value="10600"></set>
</chart>
</linkeddata>
<linkeddata id="2005-quarterly">
<chart caption="Quarterly Sales Summary" subcaption="For the year 2005"
xAxisName="Quarter" yAxisName="Sales">
<set label="Q1" value="5500"></set>
<set label="Q2" value="7100"></set>
<set label="Q3" value="3900"></set>
<set label="Q4" value="5400"></set>
</chart>
</linkeddata>
<linkeddata id="2006-quarterly">
<chart caption="Quarterly Sales Summary" subcaption="For the year 2006"
xAxisName="Quarter" yAxisName="Sales">
<set label="Q1" value="6700"></set>
<set label="Q2" value="9200"></set>
<set label="Q3" value="10800"></set>
<set label="Q4" value="6200"></set>
</chart>
</linkeddata>
<linkeddata id="2007-quarterly">
<chart caption="Quarterly Sales Summary" subcaption="For the year 2007"
xAxisName="Quarter" yAxisName="Sales">
<set label="Q1" value="8900"></set>
<set label="Q2" value="6600"></set>
<set label="Q3" value="11200"></set>
<set label="Q4" value="13100"></set>
</chart>
</linkeddata>
</chart>
JSON格式：
{
"chart":{
"caption":"Yearly Sales", "xaxisname":"Year", "yaxisname":"Sales" },
"data":[{
"label":"2004", "value":"37800", "link":"newchart-json-2004-quarterly"
},
{
"label":"2005","value":"21900", "link":"newchart-json-2005-quarterly"
},
{
"label":"2006", "value":"32900", "link":"newchart-json-2006-quarterly"
},
{
"label":"2007", "value":"39800", "link":"newchart-json-2007-quarterly"
}
],
"linkeddata":[{
"id":"2004-quarterly",
"linkedchart":{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"For the year 2004",
"xaxisname":"Quarter",
"yaxisname":"Sales"
},
"data":[
{ "label":"Q1", "value":"11700" },
{ "label":"Q2", "value":"8600" },
{ "label":"Q3", "value":"6900" },
{ "label":"Q4", "value":"10600" }
]
}
},
{
"id":"2005-quarterly",
"linkedchart":{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"For the year 2005",
"xaxisname":"Quarter",
"yaxisname":"Sales"
},
"data":[
{ "label":"Q1", "value":"5500" },
{ "label":"Q2", "value":"7100" },
{ "label":"Q3", "value":"3900" },
{ "label":"Q4", "value":"5400" }
]
}
},
{
"id":"2006-quarterly",
"linkedchart":{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"For the year 2006",
"xaxisname":"Quarter",
"yaxisname":"Sales"
},
"data":[
{ "label":"Q1", "value":"6700" },
{ "label":"Q2", "value":"9200" },
{ "label":"Q3", "value":"10800" },
{ "label":"Q4", "value":"6200" }
]
}
},
{
"id":"2007-quarterly",
"linkedchart":{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"For the year 2007",
"xaxisname":"Quarter",
"yaxisname":"Sales"
},
"data":[
{ "label":"Q1", "value":"8900" },
{ "label":"Q2", "value":"6600" },
{ "label":"Q3", "value":"11200" },
{ "label":"Q4", "value":"13100" }
]
}
}
]
}
具体示例这里不再举例，小子也是刚刚接触，待详细了解后有必要的话再拿出来分享吧。大家有兴趣可以自己去看看官方文档。
上一篇: dojo实现的两种拖拽方式(拖动、拖放) 下一篇: 博客两周年小记