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(工具) 中大型项目: ...
随机推荐
- Centos 在线安装 nginx
centos 在线安装 nginx 安装nginx 参考文档: http://nginx.org/en/linux_packages.html 中的RHEL/CentOS章节,按照步骤安装repo ...
- Linux C/C++基础 文件(下)
1.fgets和fputs #include <stdio.h> int fputs(const char * str, FILE * stream); 功能:将str所指定的字符串写入到 ...
- flask_script
Flask Script扩展提供向Flask插入外部脚本的功能,包括运行一个开发用的服务器,一个定制的Python shell,设置数据库的脚本,cronjobs,及其他运行在web应用之外的命令行任 ...
- Eclipse注释
首先,Window------>preferences------>java------>Code Style------>Code Templates------>Co ...
- 菜鸟系列Fabric——Fabric 1.2 多机部署(3)
多机部署fabric kafka共识 1. 角色分配 主机1 主机 2 Org1 peer0 1 Org2 peer 0 1 Orderer 0 1 Orderer 2 kafka 0 1 kafka ...
- 1. centos7 的安装
选择上海时间 我们选择桌面版 选择手动配置分区 选择标准分区 修改主机名 开始安装 设置密码 设置用户名 接下来等待安装完 同样的操作再安装3台机器!!这里不多赘述. 安装完之后就重启 接下来给不同机 ...
- [Python3] 040 文件 一般使用
目录 文件 1. open 函数 2. with 语句 3. 先写再读 3.1 写 3.2 读 4. "位置"的查询与移动 4.1 tell() 4.2 seek(cookie, ...
- [转帖]docker清理日志
docker清理日志 2017年05月03日 10:37:27 不想当码农的程序员 阅读数 12827 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn. ...
- Oracle临时表的功能与应用
什么是临时表,用户做一个操作查询出几百几千条数据,我们可以把数据放在内存中.当有很多用户都这样做,内存空间不足,这个时候就需要把数据保存在磁盘上.对于 oracle 就提供了一种临时表用于存放这些数据 ...
- .Net Core 中使用NLog作为日志中间件
⒈安装相关依赖 NLog NLog.Web.AspNetCore ⒉在项目的根目录中创建NLog配置文件 <?xml version="1.0" encoding=" ...