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很不错,想要使用的同学,可以去自己探索一下,