FusionCharts(v3.6.0)使用（1）

前段时间做一个统计系统，需要画各种图表，于是找到了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的格式准备好

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.单系列表

2.多系表格

Chart属性

待续...