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. iOS服务器数据请求"汉字编码"问题

    下面记录一下数据请求问题: 1.不知道大家有木有遇到过,当数据请求的URL带有汉字的时候,请求数据肯定会报404错误,也就是参数或者是接口URL错误<虽然说404,500等错误一般都是服务器问题 ...

  2. java:ssh连接服务器,实现本地文件上传和下载

    1.连接至服务器:ssh hp@10.10.17.16 -p 5555    下载文件:scp -r hp@10.10.17.16:/ccc(服务器路径,文件夹下所有文件)  /path(本地路径) ...

  3. 关于JavaScript实例化的理解

    要理解这个,我们首先要理解一个概念“类”,所谓类,指的是对象的模版.对象就是类的实例.由前面我们知道,对象是单个实物的抽象,所以通常需要一个模版,表示某一类实物的共同特征,然后对象根据这个模版生成,这 ...

  4. 【MM系列】SAP S/4 HANA BP创建客户/供应商的一点想法

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP S/4 HANA BP创建客 ...

  5. 【ABAP系列】SAP ABAP如何在调试查看EXPORT/IMPORT 内存数据

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP如何在调试查看E ...

  6. ubuntu 编译安装 svn

    1,简单的安装svn (1)  sudo apt-get install subversion 但是此种方式,可能不能安装到当前最新的svn.如当前最新的版本是svn 1.8.9 ,但是 通过此种安装 ...

  7. Star all over again.

    0x00前言 经过了一上午的折腾之后,博客的界面勉强可观,今天下午将之前的所有博客全部删除,重新开始写属于自己的博客,而不是只把它当作一个收藏夹,转载其他人的文章. 0x01近来感想 有感而发,随便写 ...

  8. 【Python开发】Python:itertools模块

    Python:itertools模块 itertools模块包含创建有效迭代器的函数,可以用各种方式对数据进行循环操作,此模块中的所有函数返回的迭代器都可以与for循环语句以及其他包含迭代器(如生成器 ...

  9. PTA(Basic Level)1022.D进制的A+B

    输入两个非负 10 进制整数 A 和 B (≤230−1),输出 A+B 的 D (1<D≤10)进制数. 输入格式: 输入在一行中依次给出 3 个整数 A.B 和 D. 输出格式: 输出 A+ ...

  10. Linux学习笔记(15)Linux字符集(locale,LANG,LC_ALL)

    关键词:linux系统修改编码,linux字符集问题, 目录  零.什么是locale 一.locale的详细内容 二.理解locale的设置 三 具体设定locale的方法(zh_CN.UTF-8. ...