使用FusionCharts完成统计图表

来源：互联网发布：图片上传淘宝变模糊编辑：程序博客网时间：2024/06/05 08:30

CRM-使用FusionCharts完成统计图

简介：
FusionCharts 是使用javascript 实现统计图表的js组件；其官网地址：http://www.fusioncharts.com。
其早期版本FusionCharts Free 是基于flash来实现，而在2014年其脱离开flash完全使用js来实现统计图表的FusionCharts Suite XT
来替代FusionCharts Free使其具有充分跨浏览器和终端的特点。

简单介绍

下载FusionCharts后，解压进入js目录后可以看到这6个js文件：
fusioncharts.charts.js
fusioncharts.js
fusioncharts.powercharts.js
fusioncharts.gantt.js
fusioncharts.maps.js
fusioncharts.widgets.js

如果只是绘制简单的2D、3D图形，比如柱状图、饼图、折线图，仅仅使用 fusioncharts.charts.js 和fusioncharts.js就可以完成。
fusioncharts.widgets.js的引入则可以绘制类似汽车里程表、球形表（？，反正很牛）、线条图、那种类似锥形的图表
fusioncharts.powercharts.js的引入就可以绘制像股市价格、金融计划那种复杂的表。
fusioncharts.maps.js 的引入可以绘制交互式地图，主要是美国地图。

在themes文件夹下还有各种主题，我们在绘制图表时还可以选择不同的主题。

简单使用

在相应的jsp页面引入 fusioncharts.js”和“fusioncharts.charts.js” （一般需求）
创建一个fusioncharts容器。 ->
FusionCharts XT will load here!
new 一个FusionCharts对象，并将规定格式的json作为参数传入（如下范例代码）
Json参数中的renderAt属性为我们刚才为他准备容器的ID
json参数中的data属性即我们要展现的数据
可以看出格式是 [ {“label”: “Jan”, “value”: “420000”}, ….] 应该不难理解，键值吗， xy吗
至于其他属性，看名字应该很容易理解。

FusionCharts 很牛的一个地方就是能够高度自定义，我们几乎可以自定义我们要展现的统计图的所有内容。
我们还可以利用FusionCharts很轻易的改变统计图为饼形、曲线、柱形，并且可改为2D、3D等

调用 FusionCharts.render(); 即可自动绘制图形

下面为使用FusionCharts展现一个简单的曲线图。

<html>    <head>    <title>My first chart using FusionCharts Suite XT</title>    <script type="text/javascript" src="fusioncharts/js/fusioncharts.js"></script>    <script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>    <script type="text/javascript">      FusionCharts.ready(function(){        var revenueChart = new FusionCharts({            "type": "column2d",            "renderAt": "chartContainer",            "width": "500",            "height": "300",            "dataFormat": "json",            "dataSource":  {              "chart": {                "caption": "Monthly revenue for last year",                "subCaption": "Harry's SuperMart",                "xAxisName": "Month",                "yAxisName": "Revenues (In USD)",                "theme": "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"                }              ]          }      });        revenueChart.render();    })    </script>    </head>    <body>      <div id="chartContainer">FusionCharts XT will load here!</div>    </body>    </html>

图表水印问题

当你使用FusionCharts绘制完图表后，在左下角，会有一个FusionCharts的水印。
这是因为你没有交钱的原因吧。

FusionCharts很不错，想要使用的同学，可以去自己探索一下，

0 0