FushionChart一个酷炫的图表插件

FushionChart是一个关于图表的js插件。它能够把很多简单的图表用很酷很炫的方式显示在html中。它接受json,xml数据格式，我们只需要知道不同图表不同的数据格式就能够正确显示图表了。它操作起来非常简单，下面我就来简单介绍一下它是如何使用的。以下使用的所有数据都是静态的json格式的数据。要实现动态效果自己加上ajax将数据传过来就行了。

1. 首先在官网上下载最新的FushionChart js库，官网地址: http://www.fusioncharts.com/

2. 解压下载下来的jar以后观察其目录结构

assets --> 存放资源的,我们用不到。

export-handlers --> 存放与asp和php的相关的文件,我用的是java所以也用不到。

js --> 我们要用的所有的js全在这里面了。

license --> 一个doc文档,用不到。

index.html --> 一个教程页面

因为js目录下的文件才是我们用得到,所以接下来我就详细说明一下它里面各个文件的作用。

js目录下文件说明
File Name	Description
fusioncharts.js	这是FushionChart所有的基础类库，使用所有图表都需要有此js的支持，这个js一定要引入
fusioncharts.charts.js	这是支持FusionCharts XT类型图表的js，如果需要使用charts则需要将此js和fusioncharts.js 放置在同一目录下
fusioncharts.widgets.js	这是支持FusionWidgets XT类型图表的js，如果需要使用widgets则需要将此js和fusioncharts.js 放置在同一目录下
fusioncharts.powercharts.js	这是支持PowerCharts XT类型图表的js，如果需要使用powercharts则需要将此js和fusioncharts.js 放置在同一目录下
fusioncharts.gantt.js	这是支持FusionWidgets XT下的Gantt chart类型图表的js，则需使用要将此js和fusioncharts.js 放置在同一目录下
fusioncharts.maps.js	这是支持map类型图表的js，则需要将此js和fusioncharts.js 放置在同一目录下相当于地图库的底层
maps/*	此目录下的js都是对fusioncharts.maps.js的支持,属于maps的definition文件，针对每张地图的具体js
themes/*	主题js提供charts, gauges, maps的主题。如果要使用主题,这个目录下的js也需要引入,但是只需要引入所需要的就行

下面就可以来看看如何实现一个简单的3D柱状图

<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<title>My First Column 3D chart</title>
<script type="text/javascript" src="js/fusioncharts.js"></script><!-- fusioncharts基础js类库 -->
<script type="text/javascript" src="js/themes/fusioncharts.theme.fint.js"></script><!-- fusioncharts主题js -->
<script type="text/javascript">
FusionCharts.ready(function () {var stackedChart = new FusionCharts({"type": "column3d",       //显示图表的类型"renderAt": "chartContainer",  //renderAt为存放chart的标签id,一般放在div中"width": "400",         //chart的宽"height": "300",       //chart的高"dataFormat": "json",      //需要显示成chart的数据的格式,还可以是xml"dataSource":  {"chart": {"caption": "Monthly revenue for last year", //一级标题"subCaption": "Harry's SuperMart",       //二级标题"xAxisName": "Month",             //x轴表示Month"yAxisName": "Revenues (In USD)",        //Y轴表示总收入"numberPrefix": "$",               //value前带上$"theme": "fint"                  //主题fint},"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"}]}});stackedChart.render();
});
</script>
</head>
<body><div id="chartContainer">A Column 3D chart will load here! </div>
</body>
</html>

下面是效果图：

下面来解释一下代码:

首先,FusionCharts.ready()相当于jQuery的$(document).ready()，在这个方法里面,新建一个变量。上面的例子是stackedChart 这个变量指向一个

FusionChart的对象，这个对象里面,面述了我们要显示的图表。

type：就是你所想要显示的图表类型的属性。这个类型有很多种，后面我已经列出一些图表类型。

dataSource：就是我们图表中要显示的数据，不同图表类型，对数据也是有一些依赖。就是说要正确显示相应的图表，我们需要提供相对应格式的数据。

chart：用来表述这个图表的外观的。同一种类型的图表可以有不同的显示，例如颜色,数据显示的方式

data：就是要显示的数据啦

caption：图表的一级标题

subCaption：图表的二级标题

xAxisName：x轴表示的是什么,这里是Month

yAxisName：Y轴表示的是什么,这里是总收入

numberPrefix：value的数字的前缀,这里是$

theme：图表的主题fint

这里FusionChart已经为我们提供了几套主题：carbon,fint,ocean,zune。如果要使用这些主题,需要引入相应的js。如果需要修改部分样式可以直接在chart

中重新定义，有能力的还可以自己去定制一个自己喜欢的主题。通过上面可以看出fushionchart使用起来很简单。引入js，选择好需要的图表类型type，之后设置

宽和高,存放图表标签的id.然后设置相应的图表信息，引入数据就ok了。

以下是部分图表类型

Single Series Charts(简单系列图表)

Chart Type	JavaScript Name	中文名
Column 2D	column2d	2D柱状图
Column 3D	column3d	3D柱状图
Line 2D	line	2D线形图
Area 2D	area2d	2D区域图
Bar 2D	bar2d	2D条形图
Bar 3D	bar3d	3D条形图
Pie 2D	pie2d	2D饼图
Pie 3D	pie3d	3D饼图
Doughnut 2D	doughnut2d	2D圆环图
Doughnut 3D	doughnut3d	3D圆环图
Pareto 2D	pareto2d	2D排列图
Pareto 3D	pareto3d	3D排列图

fushionchart有用的网址:

http://docs.fusioncharts.com/tutorial-setup-installation.html：这个是fushionchart使用手册，里面讲解的非常详细，同时有每一个系列表格的简单构建说明。

http://docs.fusioncharts.com/FusionCharts.html#page-class--fusioncharts：fushionchart的api这个我就不多做介绍了。

http://www.fusioncharts.com/explore/charts/：里面有每一种表格的图片样子，同一图表还有不同的显示风格，我们都可以点击查看我们喜欢的表格样式设置

和相应表格所需要的数据格式。

http://docs.fusioncharts.com/tutorial-setup-list-of-charts.html：所有funshionchart的type类型都可以在这里找到。

以上四个网址就可以帮助我们完全了解fushionchart了。

fushionchart一些特殊功能(这些在上面的网址中都有提到，如果仔细看会看到)：支持图表下载，可以以图片或者pdf格式下载下来。图表还有一些点击事件，

可以放大缩小，部分显示,二级图表等。还可以制作任务表格。还有很多特殊的图表例如温度计啊，速度表等等，有你很多意想不到的图表。

FushionChart一个酷炫的图表插件相关推荐

如何开发一个酷炫的mdx
使用mdx开发一个酷炫的ppt 效果展示:mdx-deck-slide-decks MDX 是一种书写格式,允许你在 Markdown 文档中无缝地插入 JSX 代码. 你还可以导入(import ...
一款简单、实时、酷炫的图表制作软件
当今,图表制作已经成了每一个职场人的日常,如果列个职场基本傍身技能排行榜,图表制作怕是前三了.虽说它是工作日常,虽说它很重要,但很多人还是做不好图表. 比如,我们想象中的图表可能是这样的: 做出来的图 ...
oracle 图表工具,一款简单、实时、酷炫的图表制作软件
阅读提示: 文章中与FineReport软件使用的相关内容,基于软件的V7.0旧版本编写,不代表软件最新的使用方式. FineReport最新版免费试用:https://www.finereport. ...
使用TextInputLayout分分钟构造一个酷炫登录框架
Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,Android ...
利用GitHub搭建一个酷炫免费的个人博客
转载自公众号:python_shequ 由于公众号的文章不易后续整理阅读,于是小吴昨天上午花了半个小时使用 GitHub + Hexo 搭建了一下个人博客,打算将公众号的文章搬过去,支持关键字搜索.分 ...
超详细——手把手教你用threejs实现一个酷炫的模型发光扫描效果(一)
前言模型特效是大家在3d可视化项目所追求的,但很多人苦于无法实现一个好的模型效果,本次就手把手一步一步教你实现一个酷炫的模型发光扫描特效,帮让你的项目提升一个逼格.话不多说,先上效果: 本文所使用的 ...
python随手记自动记账_菜鸟也疯狂！8分钟用Python做一个酷炫的家庭随手记
原标题:菜鸟也疯狂!8分钟用Python做一个酷炫的家庭随手记每个月都有各种各样的开销,不当家不知道柴米贵呀!柴米油盐酱醋茶样样都要开销,吃的穿的,各种开销,每个月都没有啥结余,小编月初是富人,月底 ...
【有了可图网】PS实战系列64：用PS的3D功能设计制作一个酷炫的彩色立体字体
本篇教大家如何巧用PS的3D功能设计制作一个酷炫的彩色立体字体!教程讲解过程超详细,主要用到了PS的滤镜.调整层以及图层样式来完成效果,需转学起来! 彩色立体文字纹理素材链接链接:https://pa ...
用HTML、CSS写一个酷炫的动态搜索框
用HTML.CSS写一个酷炫的动态搜索框可伸展的动态搜索框! 复制粘贴即可用! HTML部分: <!DOCTYPE html> <html lang="en"& ...

FushionChart一个酷炫的图表插件

Single Series Charts(简单系列图表)

FushionChart一个酷炫的图表插件相关推荐

最新文章

热门文章