FusionCharts在Java中的应用

﹏ヽ暗。殇╰゛Y 2022-07-18 00:15 172阅读 0赞

**一、介绍**

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

在线Demo：[http://www.fusioncharts.com/free/demos/Blueprint/][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][view plain]

1.  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2.  <html>
3.  <head>
4.  <meta http-equiv="Content-Type" content="text/html; charset=GBK">
5.  <mce:script language="JavaScript" src="FusionCharts/JSClass/FusionCharts.js" mce\_src="FusionCharts/JSClass/FusionCharts.js"></mce:script>
6.  <title>图</title>
7.  </head>
8.  <body>
9.  
10. <table align='center' border="1">
11. <caption>图</caption>
12. 
13. <tr>
14. <td>
15. <div id='Pie' align="center">
16. <script type="text/javascript">
17. var chart =
18. new FusionCharts('FusionCharts/Charts/FCF\_Pie2D.swf', "ChartId", "400", "300");
19. chart.setDataURL("data.xml");
20. chart.render('Pie');
21. 
22. </script>
23. </div>
24. </td>
25. </tr>
26. 
27. </table>
28. </body>
29. </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][view plain]

1.  <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'>
2.  <set name='2009-10-04' value='57653' color='AFD8F8'/>
3.  <set name='2009-10-05' value='57389' color='F6BD0F'/>
4.  <set name='2009-10-06' value='59256' color='8BBA00'/>
5.  <set name='2009-10-07' value='62762' color='FF8E46'/>
6.  <set name='2009-10-08' value='63287' color='008E8E'/>
7.  <set name='2009-10-09' value='60109' color='D64646'/>
8.  <set name='2009-10-10' value='64653' color='8E468E'/>
9.  <set name='2009-10-11' value='61687' color='588526'/>
10. </graph>

显示效果如下：

![Snap1.jpg][]

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

**\[c-sharp\]** [view plain][] [copy][view plain]

1.  <script type="text/javascript">
2.  var chart =
3.  new FusionCharts('FusionCharts/Charts/FCF\_Pie2D.swf', "ChartId", "400", "300");
4.  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>");
5.  chart.render('Pie');
6.  
7.  <script>

**五、单序列XML形式**

举例：

**\[xhtml\]** [view plain][view plain 1] [copy][view plain 1]

<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

![Snap1633914186931718750.jpg][]

![Snap2.jpg][]

（2）Area图

FCF\_Area2D.swf

![Snap3.jpg][]

（3）Bar图

FCF\_Bar2D.swf

![Snap4.jpg][]

（4）Column图

FCF\_Column2D.swf FCF\_Column3D.swf

![Snap5.jpg][]

![Snap6.jpg][]

（5）Line图

FCF\_Line.swf

![Snap7.jpg][]

（6）Doughnut图

FCF\_Doughnut2D.swf

![Snap1.jpg 1][]

**六、多序列XML形式**

举例：

**\[c-sharp\]** [view plain][view plain 1] [copy][view plain 1]

1.  <graph baseFont='SunSim' baseFontSize='12' caption='分析' subcaption='' yAxisMinValue='0' yAxisMaxValue='100' xaxisname='地区
2.  ' yaxisname='数量' hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='0' showvalues='1'
3.  numdivlines='10' numVdivlines='0' shownames='1' rotateNames='1' >
4.  <categories font='Arial' fontSize='11' fontColor='000000'>
5.  <category name='N. America' hoverText='North America'/>
6.  <category name='Asia' />
7.  <category name='Europe' />
8.  <category name='Australia' />
9.  <category name='Africa' />
10. </categories>
11. <dataset seriesname='Rice' color='FDC12E' alpha='100'>
12. <set value='30' />
13. <set value='26' />
14. <set value='29' />
15. <set value='31' />
16. <set value='34' />
17. </dataset>
18. <dataset seriesname='Wheat' color='56B9F9' showValues='1' alpha='100'>
19. <set value='67' />
20. <set value='98' />
21. <set value='79' />
22. <set value='73' />
23. <set value='80' />
24. </dataset>
25. <dataset seriesname='Grain' color='C9198D' showValues='1' alpha='100'>
26. <set value='27' />
27. <set value='25' />
28. <set value='28' />
29. <set value='26' />
30. <set value='10' />
31. </dataset>
32. </graph>

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

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

<categroy>对应一个种类

name：种类名

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

seriesname：序列的名称

<set>：序列的一个值

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

（1）Area图

FCF\_MSArea2D.swf

![Snap8.jpg][]

（2）Bar图

FCF\_MSBar2D.swf

![Snap9.jpg][]

（3）Column图

FCF\_MSColumn2D.swf FCF\_MSColumn3D.swf

![Snap10.jpg][]

![Snap11.jpg][]

（4）Line图

FCF\_MSLine.swf

![Snap12.jpg][]

（5）Stacked图

FCF\_StackedArea2D.swf

![Snap1633914252996875000.jpg][]

FCF\_StackedBar2D.swf

![Snap2.jpg 1][]

FCF\_StackedColumn2D.swf FCF\_StackedColumn3D.swf

![Snap3.jpg 1][]

![Snap4.jpg 1][]

**七、产生上述XML的类**

**\[java\]** [view plain][view plain 1] [copy][view plain 1]

1.  1.  public class FusionChartsXMLGenerator \{
    2.  
    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);
    6.  
    7.  private static FusionChartsXMLGenerator singleton = new FusionChartsXMLGenerator();
    8.  
    9.  public static FusionChartsXMLGenerator getInstance() \{
    10. return singleton;
    11. \}
    12. 
    13. private FusionChartsXMLGenerator() \{\}
    14. 
    15. private String\[\] colors = \{"AFD8F8", "F6BD0F", "8BBA00", "FF8E46", "008E8E",
    16. "D64646", "8E468E", "588526", "B3AA00", "008ED6", "9D080D", "A186BE"\};
    17. 
    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. \}
    46. 
    47. if (max == -Double.MAX\_VALUE) \{
    48. max = 0;
    49. \}
    50. 
    51. if (min == Double.MAX\_VALUE) \{
    52. min = 0;
    53. \}
    54. 
    55. if (min == max && min == 0) \{
    56. min = 0;
    57. max = 100;
    58. \}
    59. 
    60. 
    61. max = Math.abs(max / 10) + max;
    62. min = min - Math.abs(min / 10);
    63. 
    64. int valCnt = ((List)data.get(0)).size() - 1;
    65. if (valCnt > 30) \{
    66. showNames = 0;
    67. showValues = 0;
    68. \}
    69. 
    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'>");
    79. 
    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>");
    86. 
    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. \}
    99. 
    100. strXml.append("</graph>");
    101. String str = strXml.toString();
    102. LOGGER.info("=============/n" + str + "/n==============/n");
    103. return str;
    104. \}
    105. 
    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) \{
    117. 
    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. \}
    129. 
    130. if (max == -Double.MAX\_VALUE) \{
    131. max = 0;
    132. \}
    133. 
    134. if (min == Double.MAX\_VALUE) \{
    135. min = 0;
    136. \}
    137. 
    138. if (min == max && min == 0) \{
    139. min = 0;
    140. max = 100;
    141. \}
    142. 
    143. 
    144. max = Math.abs(max / 10) + max;
    145. min = min - Math.abs(min / 10);
    146. 
    147. int valCnt = data.size() - 1;
    148. if (valCnt > 30) \{
    149. showNames = 0;
    150. showValues = 0;
    151. \}
    152. 
    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 + "'/>");
    168. 
    169. \}
    170. strXml.append("</graph>");
    171. String str = strXml.toString();
    172. LOGGER.info("=============/n" + str + "/n==============/n");
    173. return str;
    174. \}
    175. \}

**八、其他图**

（1）漏斗图

FCF\_Funnel.swf

XML：

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

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

![Snap1.jpg 2][]

（2）线柱组合图

FCF\_MSColumn2DLineDY.swf FCF\_MSColumn3DLineDY.swf

XML:

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

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

![Snap2.jpg 2][]

![Snap3.jpg 2][]

(3)K线图

FCF\_Candlestick.swf

XML:

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

[http_www.fusioncharts.com_free_demos_Blueprint]: http://www.fusioncharts.com/free/demos/Blueprint/
[view plain]: http://blog.csdn.net/gtuu0123/article/details/4690722
[Snap1.jpg]: /images/20220717/0ecd7451387c4ef99974df00e3a296a3.png
[view plain 1]: http://blog.csdn.net/gtuu0123/article/details/4691146
[Snap1633914186931718750.jpg]: /images/20220717/27a8736312534b818151527235355eba.png
[Snap2.jpg]: /images/20220717/8e5e206a63a745d4b0685c3db2580ede.png
[Snap3.jpg]: /images/20220717/d2029759682f4e81abcf1a5a7e9f67ed.png
[Snap4.jpg]: /images/20220717/899d62cd243a4355a1b52b16a70c990c.png
[Snap5.jpg]: /images/20220717/28510e4ac8984e458e886293517adb97.png
[Snap6.jpg]: /images/20220717/9f79daf0080c4be68d798c43ffd8f40c.png
[Snap7.jpg]: /images/20220717/f213406301174764986d4ec856ac2e61.png
[Snap1.jpg 1]: /images/20220717/c6996c08dd4a4aa385d585f62d40d893.png
[Snap8.jpg]: /images/20220717/9f2cd7cfe61042f2a954415a307a6a0d.png
[Snap9.jpg]: /images/20220717/3d37d6c9d553418e835c4e842b814bd4.png
[Snap10.jpg]: /images/20220717/a5ab25c838b047a8baf4acd5a71f895e.png
[Snap11.jpg]: /images/20220717/23d61065e97b48aab27f7fd2c826016b.png
[Snap12.jpg]: /images/20220717/b8773ab72c3641a188e4adf7deae9489.png
[Snap1633914252996875000.jpg]: /images/20220717/2c4ed1ab15e14e1e93637781018a7199.png
[Snap2.jpg 1]: /images/20220717/da5eb243b77d40469892601a1079e652.png
[Snap3.jpg 1]: /images/20220717/11e01fb04f8842cbbb81740600500c5d.png
[Snap4.jpg 1]: /images/20220717/46d73ce536144ddf82c1e2cf51c73dab.png
[Snap1.jpg 2]: /images/20220717/009ce760191441ceb68c1a9e00080d5a.png
[Snap2.jpg 2]: /images/20220717/0e40111d83dc41ae9a571d86e80f971a.png
[Snap3.jpg 2]: /images/20220717/1d584de42459441792ed5592719fa370.png