FusionCharts在Java中的基本使用

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

coffeehot

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

阅读量121

点赞数

分类专栏： web report 文章标签： java javascript xhtml ViewUI

本文链接：https://blog.csdn.net/coffeehot/article/details/84695682

版权

web 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

report

2 篇文章 0 订阅

订阅专栏

转自：http://jayyanzhang2010.iteye.com/blog/1852170

一、介绍

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

1. public class FusionChartsXMLGenerator {
3. public static final int BOOLEAN_TRUE = 0;
4. public static final int BOOLEAN_FALSE = 1;
5. private static Logger LOGGER = LoggerFactory.getLogger(FusionChartsXMLGenerator.class);
7. private static FusionChartsXMLGenerator singleton = new FusionChartsXMLGenerator();
9. public static FusionChartsXMLGenerator getInstance() {
10. return singleton;
11. }
13. private FusionChartsXMLGenerator() {}
15. private String[] colors = {"AFD8F8", "F6BD0F", "8BBA00", "FF8E46", "008E8E",
16. "D64646", "8E468E", "588526", "B3AA00", "008ED6", "9D080D", "A186BE"};
18. /**
19. * data形式为:
20. * "" category1,category2,category3...-------->这是第一行
21. * type1 value1,value2,value3,...
22. * type2 value1,value2,value3,...
23. * ......
24. */
25. public String getMultiDSXML(List<List<String>> data,
26. String caption, String subCaption,
27. String xAxisName, String yAxisName,
28. int showNames,int showValues,
29. int decimalPrecision, int rotateNames) {
30. double max = -Double.MAX_VALUE, min = Double.MAX_VALUE;
31. for (int i = 1; i < data.size(); i++) {
32. List row = (List)data.get(i);
33. for (int j = 1; j < row.size(); j++) {
34. String val = (String)row.get(j);
35. if (val != null && val.length() > 0) {
36. double v = Double.parseDouble(val);
37. if (v > max) {
38. max = v;
39. }
40. if (v < min) {
41. min = v;
42. }
43. }
44. }
45. }
47. if (max == -Double.MAX_VALUE) {
48. max = 0;
49. }
51. if (min == Double.MAX_VALUE) {
52. min = 0;
53. }
55. if (min == max && min == 0) {
56. min = 0;
57. max = 100;
58. }
61. max = Math.abs(max / 10) + max;
62. min = min - Math.abs(min / 10);
64. int valCnt = ((List)data.get(0)).size() - 1;
65. if (valCnt > 30) {
66. showNames = 0;
67. showValues = 0;
68. }
70. StringBuffer strXml = new StringBuffer();
71. strXml.append("<graph baseFont='SunSim' baseFontSize='12' caption='" +
72. caption +"' subcaption='" + subCaption + "' " +
73. "yAxisMinValue='" + min + "' yAxisMaxValue='" + max + "' " +
74. "xAxisName='" + xAxisName + "' yAxisName='" + yAxisName + "' hovercapbg='FFECAA' " +
75. "hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='" + decimalPrecision + "' " +
76. "showValues='" + showValues + "' numdivlines='10' numVdivlines='0' " +
77. "showNames='" + showNames + "' rotateNames='" + rotateNames + "' " +
78. "rotateYAxisName='0' showAlternateHGridColor='1'>");
80. strXml.append("<categories>");
81. List headerRow = (List)data.get(0);
82. for (int i = 1; i < headerRow.size(); i++) {
83. strXml.append("<category name='" + headerRow.get(i) + "'/>");
84. }
85. strXml.append("</categories>");
87. for (int i = 1; i < data.size(); i++) {
88. List row = (List)data.get(i);
89. String name = (String)row.get(0);
90. String color = colors[(i - 1) % 12];
91. strXml.append("<dataset seriesName='" + name +"' " +
92. "color='" + color + "' anchorBorderColor='" + color + "' " +
93. "anchorBgColor='" + color + "'>");
94. for (int j = 1; j < row.size(); j++) {
95. strXml.append("<set value='" + (String)row.get(j) +"'/>");
96. }
97. strXml.append("</dataset>");
98. }
100. strXml.append("</graph>");
101. String str = strXml.toString();
102. LOGGER.info("=============/n" + str + "/n==============/n");
103. return str;
104. }
106. /**
107. * 数据格式为:
108. * name value
109. * name value
110. * ......
111. */
112. public String getSingleDSXML(List<List<String>> data,
113. String caption, String subCaption,
114. String xAxisName, String yAxisName,
115. int showNames,int showValues,
116. int decimalPrecision, int rotateNames) {
118. double max = -Double.MAX_VALUE, min = Double.MAX_VALUE;
119. for (int i = 0; i < data.size(); i++) {
120. List<String> row = data.get(i);
121. double value = Double.parseDouble(row.get(1));
122. if (value > max) {
123. max = value;
124. }
125. if (value < min) {
126. min = value;
127. }
128. }
130. if (max == -Double.MAX_VALUE) {
131. max = 0;
132. }
134. if (min == Double.MAX_VALUE) {
135. min = 0;
136. }
138. if (min == max && min == 0) {
139. min = 0;
140. max = 100;
141. }
144. max = Math.abs(max / 10) + max;
145. min = min - Math.abs(min / 10);
147. int valCnt = data.size() - 1;
148. if (valCnt > 30) {
149. showNames = 0;
150. showValues = 0;
151. }
153. StringBuffer strXml = new StringBuffer();
154. strXml.append("<graph baseFont='SunSim' baseFontSize='12' caption='" +
155. caption +"' subcaption='" + subCaption + "' " +
156. "yAxisMinValue='" + min + "' yAxisMaxValue='" + max + "' " +
157. "xAxisName='" + xAxisName + "' yAxisName='" + yAxisName + "' hovercapbg='FFECAA' " +
158. "hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='" + decimalPrecision + "' " +
159. "showValues='" + showValues + "' numdivlines='10' numVdivlines='0' " +
160. "showNames='" + showNames + "' rotateNames='" + rotateNames + "' " +
161. "rotateYAxisName='0' showAlternateHGridColor='1'>");
162. for (int i = 0; i < data.size(); i++) {
163. List<String> row = data.get(i);
164. String label = row.get(0);
165. String value = row.get(1);
166. String color = colors[i % 12];
167. strXml.append("<set name='" + label + "' value='" + value + "' color='" + color + "'/>");
169. }
170. strXml.append("</graph>");
171. String str = strXml.toString();
172. LOGGER.info("=============/n" + str + "/n==============/n");
173. return str;
174. }
175. }