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>

fusioncharts