您的位置：首页 > 其它

FushionChart一个酷炫的图表插件

2016-09-08 15:30 274 查看

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] view
plain copy

<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>

<script type="text/javascript" src="js/themes/fusioncharts.theme.fint.js"></script>

<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格式下载下来。图表还有一些点击事件，

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： FushionCharts

相关文章推荐

新的分享

章节导航