前些天根据项目需要,使用到了FusionCharts做图形报表,感觉确实挺炫。一下便是我的个人学习笔记,供初学者参考,我们先来看一下用FusionCharts设计出来的效果图。
当然,还有很多样式,很多图形,如柱状图,线性图等。具体有些啥样式在这里我就不多说了,反正很炫很强大,我们一起来做出来就知道了。
首先我们需要做的准备工作就是下载一个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文件代码
由于时间原因,写得有点零乱,望各位网友谅解。我这里把几个相关文件都留在了附件里面,有需要的朋友可以下载看一下,解压后直接导入MyEclipse就可以用了。
分享到:
相关推荐
1. **FusionCharts基本使用** - 安装与引入:首先需要下载并引入FusionCharts库,包括JS和CSS文件。 - 初始化图表:创建一个HTML元素作为图表容器,并在JavaScript中创建图表对象,设置图表类型、宽度、高度、数据...
**FusionCharts免费使用手册** FusionCharts是一款强大的JavaScript图表库,它允许开发者轻松地在网页上创建交互式、丰富多彩的图表。这份免费使用手册将深入介绍如何利用FusionCharts来构建各种图表,以增强数据...
### FusionCharts的基本概念 1. **图表类型**:FusionCharts支持多种图表类型,如条形图、折线图、饼图、散点图、雷达图、甘特图等,每种图表都有其特定的应用场景和数据表示方式。 2. **数据格式**:FusionCharts...
1. **FusionCharts基本使用**:如何安装和初始化FusionCharts库,以及如何创建基本的图表。 2. **数据格式化**:FusionCharts接受JSON或XML格式的数据,了解如何将数据库或其他数据源的数据转换为这些格式。 3. **...
在Java Web工程中使用FusionCharts,首先需要将所有Flash文件(通常在下载包的Charts目录下)复制到WebRoot目录,这些文件是生成图表的模板。接着,将`FusionCharts.jsp`文件(在Includes包中)放入WebRoot或其子...
开发者会在这里看到如何创建一个基本的图表结构,例如通过`<script>`标签引入`FusionCharts.js`,然后使用JavaScript代码实例化图表对象并设置数据。 `Data.xml`是FusionCharts的数据源文件,它可以是XML、JSON或者...
FusionCharts是一款强大的数据可视化工具,专为创建交互式、丰富多彩的...这些文件为我们提供了学习和使用FusionCharts的资源,通过深入研究这些内容,开发者可以更好地理解和掌握FusionCharts的使用方法和高级特性。
在本示例中,我们将探讨如何使用FusionCharts来创建一个饼状图。 首先,从提供的代码片段可以看到,创建FusionCharts图表的基本步骤如下: 1. **引入JavaScript库**: 在HTML文件的`<head>`部分,通过`<script>`...
FusionCharts基本概念 FusionCharts是一种基于Web的图表工具,它使用JavaScript和SVG(可缩放矢量图形)技术来展示动态、富有交互性的图表。通过XML或JSON数据格式,FusionCharts能够将各种类型的数据转换成易于...
首先,要在Android应用中使用FusionCharts,我们需要理解其基本工作原理。FusionCharts主要基于HTML5和Web技术,因此在Android上实现它通常涉及到在应用中嵌入一个WebView组件。WebView是Android系统提供的用于加载...
2. **创建图表对象**:使用JavaScript创建FusionCharts对象,并设置图表的基本属性,如类型、宽度、高度、标题、数据源等。 3. **加载数据**:数据可以是内联的JSON字符串,也可以是从服务器异步获取的。如果你选择...
### 一、FusionCharts的基本概念 1. **图表类型**:FusionCharts支持多种图表类型,包括折线图、柱状图、饼图、散点图、热力图、甘特图等,满足不同数据展示需求。 2. **数据格式**:数据可以以XML、JSON或纯...
它详细介绍了如何安装FusionCharts,设置图表的基本结构,以及如何在网页中嵌入图表。教程中还会涵盖各种图表类型(如柱状图、饼图、线图、散点图等)的创建方法,以及如何配置图表属性,实现个性化展示。此外,教程...
首先,我们需要了解FusionCharts的基本概念。FusionCharts是一款基于SVG(Scalable Vector Graphics)的交互式图表库,支持超过90种图表类型,包括柱状图、饼图、线图、组合图等。它通过JavaScript和XML数据源来渲染...
2、FusionCharts 3.1版的破解器:fusionChartsCracker.rar,有了这个破解器,可以自己下载官方的评估版自己破解自己使用; 3、收集了3.1版的FusionCharts Free中文开发指南.pdf,PDF格式,对E文不好的朋友有很大的帮助...
提供的`FusionCharts_XT_Evaluation`文件可能包含FusionCharts XT的示例代码和演示应用,这些示例通常涵盖了基本图表创建、数据源操作、图表交互等多个方面。通过查看和运行这些示例,开发者能快速掌握FusionCharts ...
在IT行业中,FusionCharts是一个广泛使用的图表库,它提供了丰富的图表类型以及强大的交互功能,使得数据可视化变得简单易行。本项目主要关注的是如何在Java后端与FusionCharts结合,通过JavaBean实体类、Action类...
在这个例子中,我们将深入探讨如何在Spring MVC项目中集成并使用FusionCharts来展示从后台数据库获取的数据。 首先,让我们理解Spring MVC的基本工作流程。Spring MVC通过DispatcherServlet接收HTTP请求,然后将...