目前在做项目完成数据统计,需要将统计数据进行图形化分析。将数据做成各种图表,即柱状图和折线图,由此接触了FusionCharts绘图插件,经过查询资料和做Demo,将项目功能完成,特此总结以备将来查阅。
一、FusionCharts简介
FusionCharts是一个JavaScript图表库,可以使用JavaScript创建交互式图表,仪表,地图和仪表板。所支持的常用的图表,新版本的FusionCharts已经不需要引用swf文件了,并且已经支持了json的数据格式
二、数据转换
2.1 原始数据
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>