前段时间做一个统计系统，需要画各种图表，于是找到了FusionCharts这个插件，功能甚是强大。在这个闲暇的春日午后，将这个插件的快速使用的方法写下来，方便懒得去官网看英文的朋友参考
安装
FusionCharts 是运行在桌面或者移动端Web浏览器中的JavaScript脚本库。安装它仅需复制粘贴下载的压缩包里的JS文件到你的项目目录下。然后，你就可以在你的Web应用程序中很轻松的引用FusionCharts脚本库，绘制各式各样的图表。
1. 在你的Web应用程序的根目录下创建一个名为fusioncharts的文件夹
2. 解压从官网（http://www.fusioncharts.com/）下载下来的压缩包
3. 将解压后js文件夹下的所有内容拷贝到项目中的fusioncharts文件夹下
4. 现在fusioncharts目录下应该包含6个js文件和两个文件夹(地图和主题)
创建图表
1. 将你的数据以JSON或者XML的格式准备好
|
Month |
Revenue |
|
January |
$ 420,000 |
|
February |
$ 810,000 |
|
March |
$ 720,000 |
|
April |
$ 550,000 |
|
May |
$ 910,000 |
|
June |
$ 510,000 |
|
July |
$ 680,000 |
|
August |
$ 620,000 |
|
September |
$ 610,000 |
|
October |
$ 490,000 |
|
November |
$ 900,000 |
|
December |
$ 730,000 |
//JSON格式
{
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"theme": "zune"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}
//XML格式
<chart caption="Monthly revenue for last year" subcaption="Harry's SuperMart" xaxisname="Month" yaxisname="Revenues (In USD)" theme="zune">
<set label="Jan" value="420000" />
<set label="Feb" value="810000" />
<set label="Mar" value="720000" />
<set label="Apr" value="550000" />
<set label="May" value="910000" />
<set label="Jun" value="510000" />
<set label="Jul" value="680000" />
<set label="Aug" value="620000" />
<set label="Sep" value="610000" />
<set label="Oct" value="490000" />
<set label="Nov" value="900000" />
<set label="Dec" value="730000" />
</chart>
2. 在你的Web页面中引入FusionCharts脚本
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.zune.js"></script>
</head>
</html>
此处引入了fusioncharts.theme.zune.js主题脚本，因为上文xml或者json中都设置了chart的theme属性为zune
3. 创建一个<div>标签用来呈现图标
<body>
<div id="chartContainer">FusionCharts XT will load here!</div>
</body>
4. 使用构造函数FusionCharts()来创建图表实例，并调用render()方法
FusionCharts.ready(function(){
var revenueChart = new FusionCharts({
type: "scrollcolumn2d",
renderAt: "chartContainer",
width: "500",
height: "300",
dataFormat: "json",
dataSource: {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"theme": "zune"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}
});
revenueChart.render("chartContainer");
结果如图：
因为是免费版，所以会有水印。
常用图表的type名称参考
1.单系列表
|
Chart Type |
JavaScript Name |
|
2D柱状图 |
column2d |
|
3D柱状图 |
column3d |
|
2D折线图 |
line |
|
2D山峰图 |
area2d |
|
2D棒行图 |
bar2d |
|
2D饼图 |
pie2d |
|
3D饼图 |
pie3d |
|
2D环形图 |
doughnut2d |
|
3D环形图 |
doughnut3d |
2.多系表格
|
Chart Type |
JavaScript Name |
|
2D多系列柱状图 |
mscolumn2d |
|
3D多系列柱状图 |
mscolumn3d |
|
2D多系列折线图 |
msline |
|
2D多系列棒状图 |
msbar2d |
|
3D多系列棒状图 |
msbar3d |
|
2D多系列山峰图 |
msarea |
Chart属性
待续...