FusionCharts绘图插件详解

目前在做项目完成数据统计，需要将统计数据进行图形化分析。将数据做成各种图表，即柱状图和折线图，由此接触了FusionCharts绘图插件，经过查询资料和做Demo，将项目功能完成，特此总结以备将来查阅。

一、FusionCharts简介

FusionCharts是一个JavaScript图表库，可以使用JavaScript创建交互式图表，仪表，地图和仪表板。所支持的常用的图表，新版本的FusionCharts已经不需要引用swf文件了，并且已经支持了json的数据格式

二、数据转换

2.1 原始数据

“石油储量最多的国家”图国家| 石油储量 - | :-: | -: 委内瑞拉 | 290 沙特| 260 加拿大| 180 伊朗| 140 俄罗斯| 115 阿联酋| 100 美国| 30 中国| 30

2.2 将表格数据转换为JSON格式

{// 表格配置"chart": {"caption": "石油储量最多的国家 [2017-2018]","subCaption": "百万桶 = 一百万桶","xAxisName": "国家","yAxisName": "储量 (百万桶)","numberSuffix": "K","theme": "fusion",},// 表格数据"data": [{"label": "委内瑞拉","value": "290"}, {"label": "沙特阿拉伯","value": "260"}, {"label": "加拿大","value": "180"}, {"label": "伊朗","value": "140"}, {"label": "俄罗斯","value": "115"}, {"label": "阿联酋","value": "100"}, {"label": "美国","value": "30"}, {"label": "中国","value": "30"}]}

上面的JSON中有：创建图表对象用来定义chart元素，然后表格数据的每一行都存储在data数组中，用来指定标签及其对应的值
Chart对象中有一对键值对，包含键和值

2.3 功能属性能够控制图标上的各种功能元素

caption属性：图表的标题。
subCaption 属性：图表的副标题。
xAxisName属性：x轴名称，yAxisName即y轴的名称。
numberPrefix属性：单位
theme属性：主题风格（默认Fusion主题，还有Gammel、Candy、Zune、Ocean）
palettecolors属性：自定义图表元素颜色或者使用“color”，在每一个元素为其添上自定义颜色
Border属性：showBorder显示图表边框，还可以自定义边框属性

三、引入FusionCharts Suite XT库

3.1 引入FusionCharts Suite XT JavaScript库

<script type="text/javascript" src="js/fusioncharts.js"></script>
<script type="text/javascript" src="js/fusioncharts.charts.js"></script>
<script type="text/javascript" src="js/fusioncharts.theme.fusion.js"></script>

3.2 为图表创建容器

每个图表，需要一对<div>元素容器来包裹，对图表添加ID来标记表格

<div id="chart-container">FusionCharts在这里显示</div>

3.3调整外观属性

使用fusion主题来自定义图表，如更改颜色，透明度，字体大小等

四、创建图表的实例

实例图表类型的为column2d，创建图表对象区别名为revenueChart，图表大小为700x400像素的Column 2D图表，dataFormat参数设置为json。还可以使用XML格式的数据setDataURL

<!DOCTYPE html>
<html><head><title>My first chart</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="js/fusioncharts.js"></script><script type="text/javascript" src="js/fusioncharts.theme.fusion.js"></script><script type="text/javascript" src="js/fusioncharts.charts.js"></script><script type="text/javascript">FusionCharts.ready(function() {var revenueChart = new FusionCharts({"type": "column2d","renderAt": "chart-container","width": "700","height": "400","dataFormat": "json","dataSource": {// 表格配置"chart": {"caption": "石油储量最多的国家 [2017-2018]","subCaption": "百万桶 = 一百万桶","xAxisName": "国家","yAxisName": "储量 (百万桶)","numberSuffix": "K","theme": "fusion",},// 表格数据"data": [{"label": "委内瑞拉","value": "290"}, {"label": "沙特阿拉伯","value": "260"}, {"label": "加拿大","value": "180"}, {"label": "伊朗","value": "140"}, {"label": "俄罗斯","value": "115"}, {"label": "阿联酋","value": "100"}, {"label": "美国","value": "30"}, {"label": "中国","value": "30"}]}});revenueChart.render();})</script></head><body><div id="chart-container">FusionCharts在这里显示</div></body></html>