FusionCharts在Java中的基本使用（1）

最新推荐文章于 2021-03-13 02:23:08 发布

gtuu0123

最新推荐文章于 2021-03-13 02:23:08 发布

阅读量1.3w

点赞数

分类专栏： Java相关 HTML &amp; CSS &amp; JS 文章标签： java javascript xml charts html graph

本文链接：https://blog.csdn.net/gtuu0123/article/details/4690722

版权

Java相关同时被 2 个专栏收录

168 篇文章 0 订阅

订阅专栏

HTML & CSS & JS

6 篇文章 0 订阅

订阅专栏

一、介绍

FusionCharts是一个基于XML和Flash的图表组件，其中FusionCharts Free是免费的，其功能也十分强大、美观。

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

其可以用在PHP、JSP、ASP等等。

二、常见的图表类型

1.Area图

2.Bar图

3.Column图

4.Line图

5.Pie图

6.Stacked图

7.Combine图

三、数据源

其数据源形式为XML的形式，XML形式分为单序列和多序列XML，以及其他的格式。

四、简单使用

目录结构：

test.html

data.xml

FusionCharts

|----------Charts

| |--------------- many charts *.swf

|----------JSClass

| |--------------- FusionCharts.js

test.html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <mce:script language="JavaScript" src="FusionCharts/JSClass/FusionCharts.js" mce_src="FusionCharts/JSClass/FusionCharts.js"></mce:script> <title>图</title> </head> <body> <table align='center' border="1"> <caption>图</caption> <tr> <td> <div id='Pie' align="center"> <script type="text/javascript"> var chart = new FusionCharts('FusionCharts/Charts/FCF_Pie2D.swf', "ChartId", "400", "300"); chart.setDataURL("data.xml"); chart.render('Pie'); </script> </div> </td> </tr> </table> </body> </html>

要注意添加以下几行代码，并注意其中的路径：

（1）导入JS： <script language="JavaScript" src='FusionCharts/JSClass/FusionCharts.js '></script>

（2）图表显示的地方：<div id='Pie' align="center">......</div>

（3）脚本：用于设置显示什么图、图的数据等

其中，chart.render("Pie")中的Pie是你要显示图的div的id

data.xml

显示效果如下：

也可以不用单独的文件存储xml，可以利用setDataXML方法，如下：

gtuu0123

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
10
评论
FusionCharts在Java中的基本使用（1）

一、介绍 FusionCharts是一个基于XML和Flash的图表组件，其中FusionCharts Free是免费的，其功能也十分强大、美观。在线Demo：http://www.fusioncharts.com/free/demos/Blueprint/ 其可以用在PHP、JSP、ASP等等。二、常见的图表类型1.Area图
复制链接

扫一扫