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 plain copy
 
  1.   
  2.   
  3.   
  4.   
  5.   
  6.   
  7.   
  8.   
  9.       
  10.       
  11.         图  
  12.           
  13.               
  14.                   
  15.                       
  16.                           
  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.   
  23.                     
  
  •                   
  •               
  •           
  •       
  •   
  •   
  •  

     

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

    (1)导入JS: 

    (2)图表显示的地方:id='Pie' align="center">......

    (3)脚本:用于设置显示什么图、图的数据等

                          

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

     

    data.xml

     

    [xhtml]  view plain copy
     
    1.   
    2.     
    3.     
    4.     
    5.     
    6.     
    7.     
    8.     
    9.     
    10.   

     

     

    显示效果如下:

    FusionCharts在Java中的基本使用_第1张图片

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

     

    [c-sharp]  view plain copy
     
    1.   
    2.                             var chart =   
    3.                             new FusionCharts('FusionCharts/Charts/FCF_Pie2D.swf', "ChartId", "400", "300");  
    4.                             chart.setDataXML("");          
    5.                             chart.render('Pie');  
    6.                           

    你可能感兴趣的:(fusioncharts)