FusionCharts在Java中的基本使用_JAVA_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > JAVA > FusionCharts在Java中的基本使用

FusionCharts在Java中的基本使用

 2015/3/29 1:06:51  getbyid  程序员俱乐部  我要评论(0)
  • 摘要:一、介绍FusionCharts是一个基于XML和Flash的图表组件,其中FusionChartsFree是免费的,其功能也十分强大、美观。在线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
  • 标签:使用 Java Fusion
一、介绍
FusionCharts是一个基于XMLFlash的图表组件,其中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)脚本:用于设置显示什么图、图的数据等

                       <script type="text/javascript">
                            var chart =
                            new FusionCharts('FusionCharts/Charts/FCF_Pie2D.swf ', "ChartId", "400", "300");
                            chart.setDataURL("data.xml");         
                            chart.render('Pie ');
                        </script>

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



data.xml
<graph baseFont='SunSim' baseFontSize='12' caption='分析' subcaption='' yAxisMinValue='51650.1' yAxisMaxValue='71118.3' xaxisname='日期' yaxisname='数量' hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='0' showvalues='1' numdivlines='10' numVdivlines='0' shownames='1' rotateNames='1'>
  <set name='2009-10-04' value='57653' color='AFD8F8'/>
  <set name='2009-10-05' value='57389' color='F6BD0F'/>
  <set name='2009-10-06' value='59256' color='8BBA00'/>
  <set name='2009-10-07' value='62762' color='FF8E46'/>
  <set name='2009-10-08' value='63287' color='008E8E'/>
  <set name='2009-10-09' value='60109' color='D64646'/>
  <set name='2009-10-10' value='64653' color='8E468E'/>
  <set name='2009-10-11' value='61687' color='588526'/>
</graph>
也可以不用单独的文件存储xml,可以利用setDataXML方法,如下:
<script type="text/javascript">
var chart =
new FusionCharts('FusionCharts/Charts/FCF_Pie2D.swf', "ChartId", "400", "300");
chart.setDataXML("<graph baseFont='SunSim' baseFontSize='12' caption='分析' subcaption='' yAxisMinValue='51650.1' yAxisMaxValue='71118.3' xaxisname='日期' yaxisname='数量' hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='0' showvalues='1' numdivlines='10' numVdivlines='0' shownames='1' rotateNames='1'><set name='2009-10-04' value='57653' color='AFD8F8'/><set name='2009-10-05' value='57389' color='F6BD0F'/><set name='2009-10-06' value='59256' color='8BBA00'/><set name='2009-10-07' value='62762' color='FF8E46'/><set name='2009-10-08' value='63287' color='008E8E'/><set name='2009-10-09' value='60109' color='D64646'/><set name='2009-10-10' value='64653' color='8E468E'/><set name='2009-10-11' value='61687' color='588526'/></graph>");   
chart.render('Pie');

<script>
上一篇: IOS开发--第三阶段--微博(7)(程序4) 下一篇: 没有下一篇了!
发表评论
用户名: 匿名