FushionCharts
FushionCharts官网:http://www.fusioncharts.com/
在线Demo:http://www.fusioncharts.com/free/demos/Blueprint/
首先我们需要做的准备工作就是下载一个FusionCharts数据包,里面包括了我们后面将试用的Jar包和Js和CSS文件等,做好了这个步骤后我们 可以开始编码了。把我们下载回来的FusionCharts包拷贝到MyEclipse项目中的WebRoot目录下,我这里整理成了一下形式
做完这一步后,导入下载FusionCharts包中的两个Jar文件
OK了,准备工作也就做完了,正式进入写代码的时候了。现在我们就来做一个Demo出来供大家学习
- <script type="text/javascript">
- function showFusionCharts(){
- var myChart = new FusionCharts("FusionCharts/Charts/Pie3D.swf", "myChartId", "1000", "800");
- myChart.setDataURL("Data.xml");
- myChart.render("chartdiv");
- }
- </script>
- <chart caption='my First Charts'>
- <set name='Jan' value='462' />
- <set name='Feb' value='857' />
- <set name='Mar' value='671' />
- <set name='Apr' value='494' />
- <set name='May' value='761' />
- <set name='Jun' value='960' />
- <set name='Jul' value='629' />
- <set name='Aug' value='622' />
- <set name='Sep' value='376' />
- <set name='Oct' value='494' />
- <set name='Nov' value='761' />
- <set name='Dec' value='960' />
- </chart>
注意:
在使用在该FusionCharts对象是,别忘了导入FusionCharts.js文件。
var myChart = new FusionCharts("FusionCharts/Charts/Pie3D.swf", "myChartId", "1000","800");
这
一句实例化了一个FusionCharts对象出来,其中第一个参数FusionCharts/Charts/Pie3D.swf就是指出你需要显示的图
标样式所对应的目录,根据我前面FusionCharts在myEclipse中的布局,打开charts目录就是了,这里面就是你对应的样式了;
第二个参数myChartId是对该实例化的FusionCharts对象定义的一个ID号,可以自己根据自己需要随意取;
第三个和第四个参数分别指明该实例化的FusionCharts对象的长和宽。
myChart.render("chartdiv"); 这一句指明了FusionCharts对象的显示地方,我这里是定义了一个<div id="chartdiv>
myChart.setDataURL("Data.xml"); 这一句指明了FusionCharts对象的数据来源,我这里为了方便,写了一个XML文件Data.xml放到了WebRoot跟目录下。
最后,在适当的地方调用该定义FusionCharts对象的方法就可以看到效果了,简单吧。
最后来总结一下:
1、准备工作整理下载回来的FusionCharts数据包,保留Charts样式、FusionCharts.js、编写XML文件。
2、导入FusionCharts.js文件
3、编写jsp文件代码
FushionCharts的更多相关文章
- fushioncharts的使用教程
FusionCharts 是使用javascript 实现统计图表的js组件:其官网地址:http://www.fusioncharts.com.其早期版本FusionCharts Free 是基于f ...
- Java封装FushionCharts
近期公司接了个关于数据统计的系统.须要用到报表功能.找了几天认为还是FushionCharts 适合.所以就对FushionCharts进行了java代码封装,方便,前台,后台调用. 1.报表Mode ...
- fushioncharts 使用教程要点---使用JSON数据方式
1.建立图表步骤: A.下载fushionChart,引入FusionCharts.js和FusionChartsExportComponent.js文件 B.建立图表对象 var chart1 = ...
- FushionCharts Free 的运用[2D/3D图表处理]
由于先前在一些论坛中谈论到这个插件的运用,留了一些QQ联系方式,最近老是被一些程序员“骚扰”,说是请教一些关于FushionChart Free图表的处理技术,先前还是比较乐意接受的,但发现后来一些完 ...
- FusionCharts参数说明 (中文)
FushionCharts是把抽象数据图示化的套件,使用方便,配置简单.其相关参数中文说明如下. FusionCharts Free中文开发指南第二版.pdf 功能特性 animation ...
- (转).net项目技术选型总结
原文作者:mcgrady 原文地址:.net项目技术选型总结 做.net开发已经几年了,也参与开发了很多大大小小的项目,所以现在希望总结出一套开发.net项目的常用技术,也为以后做项目技术选型的时候作 ...
- ECharts使用记
系统开发厂商一直都使用基于Flash的图表解决方案,例如Fushioncharts.本人也曾略做研究,当时对js不熟,只能采用静态xml方式,颇为繁琐. 自从了解了html5的新特性,意识到基于Can ...
- FusionCharts參数中文说明
FushionCharts是把抽象数据图示化的套件,使用方便,配置简单.其相关參数中文说明例如以下. 功能特性 animation 是否动画显示数据,默觉得 1( ...
- .net项目技术选型总结
做.net开发已经几年了,也参与开发了很多大大小小的项目,所以现在希望总结出一套开发.net项目的常用技术,也为以后做项目技术选型的时候作为参考. 数据库 小型项目:SQLite(工具) 中大型项目: ...
随机推荐
- 掌握Pod-Pod调度策略
一 Pod生命周期管理 1.1 Pod生命周期 Pod在整个生命周期过程中被系统定义了如下各种状态. 状态值 描述 Pending API Server已经创建该Pod,且Pod内还有一个或多个容器的 ...
- H5中调起微信这么实现,如果未安装则提示未安装
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- 3-2 LInux文件管理
LInux文件管理 文件系统目录结构 Linux中目录结构是有一定的约定的FHS /bin:存放二进制程序 /boot:启动相关 /dev:设备文件 /etc:配置文件 /home:用户家目录 /li ...
- TensorFlow 用神经网络解决非线性问题
本节涉及点: 激活函数 sigmoid 产生随机训练数据 使用随机训练数据训练 加入偏移量b加快训练过程 进阶:批量生产随机训练数据 在前面的三好学生问题中,学校改变了评三好的标准 —— 总分> ...
- Django-给视图加装饰器
给FBV加装饰器 FBV:function based view FBV本身就是一个函数,所以跟普通函数加装饰器是一样的 # 装饰函数是要在APP文件中定义,本例是在app01\templatetag ...
- linux中为什么删除文件比创建文件要快,读取文件和删除文件的过程是什么?
一.为什么删除文件比创建文件要快? 因为删除文件只是将bitmap位图表中将文件所占据的inode 和dacablock的使用状态从1变成0,相当于释放了这些快的使用权. 二.读取文件和删除文件的过程 ...
- [转帖]Windows 下如何配置Oracle ASM???
Windows 下如何配置Oracle ASM??? candon123关注10人评论16725人阅读2011-02-09 21:40:57 本篇介绍了如何在windows下创建裸设备,并创建AS ...
- SqlServer中#和##的区别
本地临时表的名称以单个数字字符(#)开头,它们仅对当前的用户连接是可见的. 全局临时表的名称以两个数字字符(##)开头,创建后对任何用户都是可见的.
- redis 学习(16)-- redis 持久化
redis 持久化 什么是持久化 redis 将所有数据保持在内存中,对数据的更新将异步地保存在磁盘中 持久化的方式 1. 快照 快照是某时某刻对数据的完整备份. 在: MySQL Dump Redi ...
- SpringMVC整体架构
总结: 1. 用户发起请求到前端控制器(DispatchServlet): 2. 前端控制器没有处理业务逻辑的能力,需要找到具体的模型对象处理(Handler),到处理器映射器中查找Handler对象 ...