FusionCharts绘图插件详解

最新推荐文章于 2021-03-13 02:23:08 发布

极客范儿

最新推荐文章于 2021-03-13 02:23:08 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/Prototype___/article/details/82344094

版权

━═━═━◥ 前端 ◤━═━═━ 同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

数据可视化

22 篇文章 2 订阅

订阅专栏

JavaScript

14 篇文章 0 订阅

订阅专栏

目前在做项目完成数据统计，需要将统计数据进行图形化分析。将数据做成各种图表，即柱状图和折线图，由此接触了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

极客范儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
FusionCharts绘图插件详解

目前在做项目完成数据统计，需要将统计数据进行图形化分析。将数据做成各种图表，即柱状图和折线图，由此接触了FusionCharts绘图插件，经过查询资料和做Demo，将项目功能完成，特此总结以备将来查阅。一、FusionCharts简介FusionCharts是一个JavaScript图表库，可以使用JavaScript创建交互式图表，仪表，地图和仪表板。所支持的常用的图表，新版本的Fu...
复制链接

扫一扫