FushionChart一个酷炫的图表插件

来源：互联网发布：python爬虫入门编辑：程序博客网时间：2024/05/21 11:13

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 NameDescriptionfusioncharts.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文件，针对每张地图的具体jsthemes/*主题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><!-- 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 TypeJavaScript Name中文名Column 2Dcolumn2d2D柱状图Column 3Dcolumn3d3D柱状图Line 2Dline2D线形图Area 2Darea2d2D区域图Bar 2Dbar2d2D条形图Bar 3Dbar3d3D条形图Pie 2Dpie2d2D饼图Pie 3Dpie3d3D饼图Doughnut 2Ddoughnut2d2D圆环图Doughnut 3Ddoughnut3d3D圆环图Pareto 2Dpareto2d2D排列图Pareto 3Dpareto3d3D排列图

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

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

0 0