FusionCharts在Java中的应用

一、介绍

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代码：

[java] view plaincopy

<!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

[xhtml] view plaincopy

<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方法，如下：

[c-sharp] view plaincopy

<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>

五、单序列XML形式

举例：

[xhtml] view plaincopy

<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>

<graph>标签的一些属性：

baseFont: 图表的字体

baseFontSize: 图表的字号

caption: 标题

subcaption: 子标题

yAxisMinValue: y轴的最小值

yAxisMaxValue: y轴的最大值

hovercapbg: 当鼠标悬停时显示的背景色

hovercapborder: 当鼠标悬停时边框色

formatNumber（0/1）:是否用逗号分隔（1--用逗号分隔，0--不用）

formatNumberScale（0/1）: 是否添加K、M到数字（1--添加，0--不添加）

decimalPrecision: 小数的位数

showValues（0/1）: 是否显示数值

numdivlines: 水平网格线的条数

numVdivlines: 垂直网络线显示的条数

showNames（0/1）: 是否显示x轴的每个数据的名称

rotateNames（0/1）：是否旋转x轴的每个数据的名称

rotateYAxisName（0/1）：是否显示y轴的名称

showAlternateHGridColor（0/1）：是否显示交替的网格颜色

<set>标签：

name: x轴的每个数据的名称

value: 值

有几种图可以使用单序列的XML格式的数据

（1）Pie图

FCF_Pie2D.swf FCF_Pie3D.swf

（2）Area图

FCF_Area2D.swf

（3）Bar图

FCF_Bar2D.swf

（4）Column图

FCF_Column2D.swf FCF_Column3D.swf

（5）Line图

FCF_Line.swf

（6）Doughnut图

FCF_Doughnut2D.swf

六、多序列XML形式

举例：

[c-sharp] view plaincopy

<graph baseFont='SunSim' baseFontSize='12' caption='分析' subcaption='' yAxisMinValue='0' yAxisMaxValue='100' xaxisname='地区
' yaxisname='数量' hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='0' showvalues='1'
numdivlines='10' numVdivlines='0' shownames='1' rotateNames='1' >
<categories font='Arial' fontSize='11' fontColor='000000'>
<category name='N. America' hoverText='North America'/>
<category name='Asia' />
<category name='Europe' />
<category name='Australia' />
<category name='Africa' />
</categories>
<dataset seriesname='Rice' color='FDC12E' alpha='100'>
<set value='30' />
<set value='26' />
<set value='29' />
<set value='31' />
<set value='34' />
</dataset>
<dataset seriesname='Wheat' color='56B9F9' showValues='1' alpha='100'>
<set value='67' />
<set value='98' />
<set value='79' />
<set value='73' />
<set value='80' />
</dataset>
<dataset seriesname='Grain' color='C9198D' showValues='1' alpha='100'>
<set value='27' />
<set value='25' />
<set value='28' />
<set value='26' />
<set value='10' />
</dataset>
</graph>

<graph>基本上同单序列XML形式

<categroies>指明x轴有几个种类

<categroy>对应一个种类

name：种类名

<dataset>指明一个序列集，序列集中值的个数同category的种类数

seriesname：序列的名称

<set>：序列的一个值

有几种图可以使用多序列的XML格式的数据

（1）Area图

FCF_MSArea2D.swf

（2）Bar图

FCF_MSBar2D.swf

（3）Column图

FCF_MSColumn2D.swf FCF_MSColumn3D.swf

（4）Line图

FCF_MSLine.swf

（5）Stacked图

FCF_StackedArea2D.swf

FCF_StackedBar2D.swf

FCF_StackedColumn2D.swf FCF_StackedColumn3D.swf

七、产生上述XML的类

[java] view plaincopy

public class FusionChartsXMLGenerator {
public static final int BOOLEAN_TRUE = 0;
public static final int BOOLEAN_FALSE = 1;
private static Logger LOGGER = LoggerFactory.getLogger(FusionChartsXMLGenerator.class);
private static FusionChartsXMLGenerator singleton = new FusionChartsXMLGenerator();
public static FusionChartsXMLGenerator getInstance() {
return singleton;
}
private FusionChartsXMLGenerator() {}
private String[] colors = {"AFD8F8", "F6BD0F", "8BBA00", "FF8E46", "008E8E",
"D64646", "8E468E", "588526", "B3AA00", "008ED6", "9D080D", "A186BE"};
/**
* data形式为:
* "" category1,category2,category3...-------->这是第一行
* type1 value1,value2,value3,...
* type2 value1,value2,value3,...
* ......
*/
public String getMultiDSXML(List<List<String>> data,
String caption, String subCaption,
String xAxisName, String yAxisName,
int showNames,int showValues,
int decimalPrecision, int rotateNames) {
double max = -Double.MAX_VALUE, min = Double.MAX_VALUE;
for (int i = 1; i < data.size(); i++) {
List row = (List)data.get(i);
for (int j = 1; j < row.size(); j++) {
String val = (String)row.get(j);
if (val != null && val.length() > 0) {
double v = Double.parseDouble(val);
if (v > max) {
max = v;
}
if (v < min) {
min = v;
}
}
}
}
if (max == -Double.MAX_VALUE) {
max = 0;
}
if (min == Double.MAX_VALUE) {
min = 0;
}
if (min == max && min == 0) {
min = 0;
max = 100;
}
max = Math.abs(max / 10) + max;
min = min - Math.abs(min / 10);
int valCnt = ((List)data.get(0)).size() - 1;
if (valCnt > 30) {
showNames = 0;
showValues = 0;
}
StringBuffer strXml = new StringBuffer();
strXml.append("<graph baseFont='SunSim' baseFontSize='12' caption='" +
caption +"' subcaption='" + subCaption + "' " +
"yAxisMinValue='" + min + "' yAxisMaxValue='" + max + "' " +
"xAxisName='" + xAxisName + "' yAxisName='" + yAxisName + "' hovercapbg='FFECAA' " +
"hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='" + decimalPrecision + "' " +
"showValues='" + showValues + "' numdivlines='10' numVdivlines='0' " +
"showNames='" + showNames + "' rotateNames='" + rotateNames + "' " +
"rotateYAxisName='0' showAlternateHGridColor='1'>");
strXml.append("<categories>");
List headerRow = (List)data.get(0);
for (int i = 1; i < headerRow.size(); i++) {
strXml.append("<category name='" + headerRow.get(i) + "'/>");
}
strXml.append("</categories>");
for (int i = 1; i < data.size(); i++) {
List row = (List)data.get(i);
String name = (String)row.get(0);
String color = colors[(i - 1) % 12];
strXml.append("<dataset seriesName='" + name +"' " +
"color='" + color + "' anchorBorderColor='" + color + "' " +
"anchorBgColor='" + color + "'>");
for (int j = 1; j < row.size(); j++) {
strXml.append("<set value='" + (String)row.get(j) +"'/>");
}
strXml.append("</dataset>");
}
strXml.append("</graph>");
String str = strXml.toString();
LOGGER.info("=============/n" + str + "/n==============/n");
return str;
}
/**
* 数据格式为:
* name value
* name value
* ......
*/
public String getSingleDSXML(List<List<String>> data,
String caption, String subCaption,
String xAxisName, String yAxisName,
int showNames,int showValues,
int decimalPrecision, int rotateNames) {
double max = -Double.MAX_VALUE, min = Double.MAX_VALUE;
for (int i = 0; i < data.size(); i++) {
List<String> row = data.get(i);
double value = Double.parseDouble(row.get(1));
if (value > max) {
max = value;
}
if (value < min) {
min = value;
}
}
if (max == -Double.MAX_VALUE) {
max = 0;
}
if (min == Double.MAX_VALUE) {
min = 0;
}
if (min == max && min == 0) {
min = 0;
max = 100;
}
max = Math.abs(max / 10) + max;
min = min - Math.abs(min / 10);
int valCnt = data.size() - 1;
if (valCnt > 30) {
showNames = 0;
showValues = 0;
}
StringBuffer strXml = new StringBuffer();
strXml.append("<graph baseFont='SunSim' baseFontSize='12' caption='" +
caption +"' subcaption='" + subCaption + "' " +
"yAxisMinValue='" + min + "' yAxisMaxValue='" + max + "' " +
"xAxisName='" + xAxisName + "' yAxisName='" + yAxisName + "' hovercapbg='FFECAA' " +
"hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='" + decimalPrecision + "' " +
"showValues='" + showValues + "' numdivlines='10' numVdivlines='0' " +
"showNames='" + showNames + "' rotateNames='" + rotateNames + "' " +
"rotateYAxisName='0' showAlternateHGridColor='1'>");
for (int i = 0; i < data.size(); i++) {
List<String> row = data.get(i);
String label = row.get(0);
String value = row.get(1);
String color = colors[i % 12];
strXml.append("<set name='" + label + "' value='" + value + "' color='" + color + "'/>");
}
strXml.append("</graph>");
String str = strXml.toString();
LOGGER.info("=============/n" + str + "/n==============/n");
return str;
}
}

八、其他图

（1）漏斗图

FCF_Funnel.swf

XML：

===================================

===================================

（2）线柱组合图

FCF_MSColumn2DLineDY.swf FCF_MSColumn3DLineDY.swf

XML:

===================================

========================================

(3)K线图

FCF_Candlestick.swf

XML:

========================================

FusionCharts在Java中的应用相关推荐

FusionCharts在Java中的基本使用！
FusionCharts_API_中文帮助文档 FusionCharts中需要的.swf文件和.js文件一.介绍 FusionCharts是一个基于XML和Flash的图表组件,其中FusionCh ...
FusionCharts在Java中的基本使用
一.介绍 FusionCharts是一个基于XML和Flash的图表组件,其中FusionCharts Free是免费的,其功能也十分强大.美观. 在线Demo:http://www.fusionch ...
fusioncharts java_FusionCharts在Java中的基本使用
FusionCharts在Java中的基本使用 2015/3/29 1:06:51 getbyid 程序员俱乐部我要评论(0) 摘要:一.介绍FusionCharts是一个基于XML和Flas ...
java fusioncharts_FusionCharts free -flash图表组件在java中使用
针对项目中图表显示,在JFreeChart使用一段时间后,针对图表显示效果来看,flash图表流体美丽,视觉性好,界面友好性更强一些,因此在一些flash组件中选择,最后尝试使用FusionChart ...
java中实现具有传递性吗_Java中volatile关键字详解,jvm内存模型，原子性、可见性、有序性...
一.Java内存模型想要理解volatile为什么能确保可见性,就要先理解Java中的内存模型是什么样的. Java内存模型规定了所有的变量都存储在主内存中.每条线程中还有自己的工作内存,线程的工作 ...
java中调用python
在Java中调用Python </h1><div class="clear"></div><div class="postBod ...
java中hashcode_浅谈Java中的Hash值
1.Hash值有什么用? HashMap.HashTable.HashSet,所以涉及到使用Hash值进行优化存储的地方,都会用到HashCode.HashCode是Key,这种计算为提高计算的性能. ...
JAVA中获取当前系统时间
JAVA中获取当前系统时间转自:http://www.cnblogs.com/Matrix54/archive/2012/05/01/2478158.html 一. 获取当前系统时间和日期并格式化输 ...
Java中的对象和包
什么是对象对象就是实际生活中的事物,可以说一切事物都是对象. 对象的三个特点 1 对象的行为:这个对象能做什么, 例如包子是用来吃的 2 对象的状态:对象保持的一种状态,例如这个包子是热的还是凉 ...

FusionCharts在Java中的应用

FusionCharts在Java中的应用相关推荐

最新文章

热门文章