FushionCharts官网:http://www.fusioncharts.com/

在线Demo:http://www.fusioncharts.com/free/demos/Blueprint/

首先我们需要做的准备工作就是下载一个FusionCharts数据包,里面包括了我们后面将试用的Jar包和Js和CSS文件等,做好了这个步骤后我们 可以开始编码了。把我们下载回来的FusionCharts包拷贝到MyEclipse项目中的WebRoot目录下,我这里整理成了一下形式

做完这一步后,导入下载FusionCharts包中的两个Jar文件

OK了,准备工作也就做完了,正式进入写代码的时候了。现在我们就来做一个Demo出来供大家学习

  1. <script type="text/javascript">
  2. function showFusionCharts(){
  3. var myChart = new FusionCharts("FusionCharts/Charts/Pie3D.swf", "myChartId", "1000", "800");
  4. myChart.setDataURL("Data.xml");
  5. myChart.render("chartdiv");
  6. }
  7. </script>
  1. <chart caption='my First Charts'>
  2. <set name='Jan' value='462' />
  3. <set name='Feb' value='857' />
  4. <set name='Mar' value='671' />
  5. <set name='Apr' value='494' />
  6. <set name='May' value='761' />
  7. <set name='Jun' value='960' />
  8. <set name='Jul' value='629' />
  9. <set name='Aug' value='622' />
  10. <set name='Sep' value='376' />
  11. <set name='Oct' value='494' />
  12. <set name='Nov' value='761' />
  13. <set name='Dec' value='960' />
  14. </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的更多相关文章

  1. fushioncharts的使用教程

    FusionCharts 是使用javascript 实现统计图表的js组件:其官网地址:http://www.fusioncharts.com.其早期版本FusionCharts Free 是基于f ...

  2. Java封装FushionCharts

    近期公司接了个关于数据统计的系统.须要用到报表功能.找了几天认为还是FushionCharts 适合.所以就对FushionCharts进行了java代码封装,方便,前台,后台调用. 1.报表Mode ...

  3. fushioncharts 使用教程要点---使用JSON数据方式

    1.建立图表步骤: A.下载fushionChart,引入FusionCharts.js和FusionChartsExportComponent.js文件 B.建立图表对象 var chart1 =  ...

  4. FushionCharts Free 的运用[2D/3D图表处理]

    由于先前在一些论坛中谈论到这个插件的运用,留了一些QQ联系方式,最近老是被一些程序员“骚扰”,说是请教一些关于FushionChart Free图表的处理技术,先前还是比较乐意接受的,但发现后来一些完 ...

  5. FusionCharts参数说明 (中文)

    FushionCharts是把抽象数据图示化的套件,使用方便,配置简单.其相关参数中文说明如下. FusionCharts Free中文开发指南第二版.pdf 功能特性 animation       ...

  6. (转).net项目技术选型总结

    原文作者:mcgrady 原文地址:.net项目技术选型总结 做.net开发已经几年了,也参与开发了很多大大小小的项目,所以现在希望总结出一套开发.net项目的常用技术,也为以后做项目技术选型的时候作 ...

  7. ECharts使用记

    系统开发厂商一直都使用基于Flash的图表解决方案,例如Fushioncharts.本人也曾略做研究,当时对js不熟,只能采用静态xml方式,颇为繁琐. 自从了解了html5的新特性,意识到基于Can ...

  8. FusionCharts參数中文说明

    FushionCharts是把抽象数据图示化的套件,使用方便,配置简单.其相关參数中文说明例如以下. 功能特性 animation                    是否动画显示数据,默觉得 1( ...

  9. .net项目技术选型总结

    做.net开发已经几年了,也参与开发了很多大大小小的项目,所以现在希望总结出一套开发.net项目的常用技术,也为以后做项目技术选型的时候作为参考. 数据库 小型项目:SQLite(工具) 中大型项目: ...

随机推荐

  1. Centos 在线安装 nginx

    centos 在线安装 nginx 安装nginx ​ 参考文档: http://nginx.org/en/linux_packages.html 中的RHEL/CentOS章节,按照步骤安装repo ...

  2. Linux C/C++基础 文件(下)

    1.fgets和fputs #include <stdio.h> int fputs(const char * str, FILE * stream); 功能:将str所指定的字符串写入到 ...

  3. flask_script

    Flask Script扩展提供向Flask插入外部脚本的功能,包括运行一个开发用的服务器,一个定制的Python shell,设置数据库的脚本,cronjobs,及其他运行在web应用之外的命令行任 ...

  4. Eclipse注释

    首先,Window------>preferences------>java------>Code Style------>Code Templates------>Co ...

  5. 菜鸟系列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 ...

  6. 1. centos7 的安装

    选择上海时间 我们选择桌面版 选择手动配置分区 选择标准分区 修改主机名 开始安装 设置密码 设置用户名 接下来等待安装完 同样的操作再安装3台机器!!这里不多赘述. 安装完之后就重启 接下来给不同机 ...

  7. [Python3] 040 文件 一般使用

    目录 文件 1. open 函数 2. with 语句 3. 先写再读 3.1 写 3.2 读 4. "位置"的查询与移动 4.1 tell() 4.2 seek(cookie, ...

  8. [转帖]docker清理日志

    docker清理日志 2017年05月03日 10:37:27 不想当码农的程序员 阅读数 12827    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn. ...

  9. Oracle临时表的功能与应用

    什么是临时表,用户做一个操作查询出几百几千条数据,我们可以把数据放在内存中.当有很多用户都这样做,内存空间不足,这个时候就需要把数据保存在磁盘上.对于 oracle 就提供了一种临时表用于存放这些数据 ...

  10. .Net Core 中使用NLog作为日志中间件

    ⒈安装相关依赖 NLog NLog.Web.AspNetCore ⒉在项目的根目录中创建NLog配置文件 <?xml version="1.0" encoding=" ...