open-flash-chart 與 FusionCharts 開發中使用

open-flash-chart

這是一個開源的Flash報表組件,可以免費使用還可以修改源碼,簡稱OFC

關於ofc版本:

目前open-flash-chart 最新的版本是2.0bate版.比較穩定的是1.9版.

1.9版本用actionscript2.0編寫, 2.0用acrionscript3.0編寫,Adobe Flex編譯,並且2.0的支持Json傳送數據.

下載open flash chart,

下載之后解壓出來的目錄結構如下:

其中:

Data-files 是一些數據文件.都是一些以json數據的txt文件

Dot-net-library..以及下面的php…python 等等都是這些前綴語言的Demo我們要研究的就是dot-net-library里的內容..

里面自帶的是vs2003開發..升級到vs2008不會出錯.

里面基本都是一些最基礎的Demo

部分圖效果如下:

要生成這幾種圖表的代碼比較簡單,主要就是一些數據的傳遞比較麻煩.

需要用的js 文件 :

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
　　swfobject.embedSWF("open-flash-chart.swf", "my_chart", "550", "200","9.0.0", "expressInstall.swf",{"data-file":"datafile/glassbar.aspx"});
</script>

glassbar.aspx

這個文件就是傳遞過來一些json數據,這里也可以指定一個txt的json文件.因為ofc 在2.0是支持json數據的,json數據的格式大體如下:

{ 
"title": { "text": "Bar Chart", 
　　　　　　　"style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}" },
　　　　　　 "x_axis": { "labels": { "steps": 1 }, "offset": false, "steps": 1, "3d": 0 }, 
　　　　　　　"y_axis": { "tick-length": 0, "offset": 0, "steps": 3, "min": 0, "max": 24, "3d": 0 }
 }

ofc的功能還是很強大的, 只是我感覺界面不是很炫,所以又接着探究下一個圖表.

FusionCharts Free

這個控件可以也是一個可以免費使用的非常豐富的圖表組件(其實是收費滴,免費的生成圖表的時候會有一個公司的圖片鏈接,很討厭,不過已經有破解版的了-_-),簡稱FCF,是一個跨平台的圖表組件, 支持多種語言.

關於版本

目前最新的應該是V3.0。

下載地址

是個英文網站..對應的找找Download就OK了..然后找到你使用的對應的語言.

點擊下載就噢可了。。下載下來的文件時個Demo 介紹的也比較全面.

fcf之所以可以跨平台跨語言..因為他的數據庫傳送是通用xml，他也只支持xml傳送數據..對xml的格式要求比較高.也就是錯一個節點,可能圖像都顯示不出來,這點很討厭..當然功能效果方面沒得說..很是炫..

需要的一些文件如下:

等等破解之后的一共49個文件..其實要使用的也就那幾個。

FusionCharts.js 這個也是個很重要的文件 ..

其實上面的幾個flash也就是個模板 ..

下面來看看效果圖,

等等..總之fcf 的動畫效果看起來很是舒服 ..

而且代碼頁非常簡單..

引入js文件:

<script src="JSClass/FusionCharts.js" type="text/javascript"></script>
<script type="text/javascript">
　　var myChart = new FusionCharts("/Charts/Column3D.swf", "myChartId", "600", "500");
　　myChart.setDataURL("data.xml");
　　myChart.render("chartdiv");
</script>

Falsh模板路徑: /Charts/Column3D.swf

Xml數據源: "data.xml"

頁面上的div id : ("chartdiv");

這樣就簡單的實現了一個柱形圖,這個擴展性很強,xml數據可以直接寫在：

myChart.setDataXML(strXML);

StrXml 就是一段XML數據..用這段話替換掉myChart.setDataURL("data.xml");就可以了.

網上整理了一些FCF的常用屬性:

功能特性 

animation 是否動畫顯示數據，默認為1(True)

showNames 是否顯示橫向坐標軸(x軸)標簽名稱

rotateNames 是否旋轉顯示標簽，默認為0(False):橫向顯示

showValues 是否在圖表顯示對應的數據值，默認為1(True)

yAxisMinValue 指定縱軸(y軸)最小值，數字

yAxisMaxValue 指定縱軸(y軸)最小值，數字

showLimits 是否顯示圖表限值(y軸最大、最小值)，默認為1(True)

圖表標題和軸名稱

caption 圖表主標題

subCaption 圖表副標題

xAxisName 橫向坐標軸(x軸)名稱

yAxisName 縱向坐標軸(y軸)名稱

圖表和畫布的樣式

bgColor 圖表背景色，6位16進制顏色值

canvasBgColor 畫布背景色，6位16進制顏色值

canvasBgAlpha 畫布透明度，[0-100]

canvasBorderColor 畫布邊框顏色，6位16進制顏色值

canvasBorderThickness 畫布邊框厚度，[0-100]

shadowAlpha 投影透明度，[0-100]

showLegend 是否顯示系列名，默認為1(True)

字體屬性

baseFont 圖表字體樣式

baseFontSize 圖表字體大小

baseFontColor 圖表字體顏色，6位16進制顏色值

outCnvBaseFont 圖表畫布以外的字體樣式

outCnvBaseFontSize 圖表畫布以外的字體大小

outCnvBaseFontColor 圖表畫布以外的字體顏色，6位16進制顏色值

分區線和網格

numDivLines 畫布內部水平分區線條數，數字

divLineColor 水平分區線顏色，6位16進制顏色值

divLineThickness 水平分區線厚度，[1-5]

divLineAlpha 水平分區線透明度，[0-100]

showAlternateHGridColor 是否在橫向網格帶交替的顏色，默認為0(False)

alternateHGridColor 橫向網格帶交替的顏色，6位16進制顏色值

alternateHGridAlpha 橫向網格帶的透明度，[0-100]

showDivLineValues 是否顯示Div行的值，默認？？

numVDivLines 畫布內部垂直分區線條數，數字

vDivLineColor 垂直分區線顏色，6位16進制顏色值

vDivLineThickness 垂直分區線厚度，[1-5]

vDivLineAlpha 垂直分區線透明度，[0-100]

showAlternateVGridColor 是否在縱向網格帶交替的顏色，默認為0(False)

alternateVGridColor 縱向網格帶交替的顏色，6位16進制顏色值

alternateVGridAlpha 縱向網格帶的透明度，[0-100]

數字格式

numberPrefix 增加數字前綴

numberSuffix 增加數字后綴 % 為 '%25'

formatNumberScale 是否格式化數字,默認為1(True),自動的給你的數字加上K（千）或M（百萬）；若取0,則不加K或M

decimalPrecision 指定小數位的位數，[0-10] 例如：='0' 取整

divLineDecimalPrecision 指定水平分區線的值小數位的位數，[0-10]

limitsDecimalPrecision 指定y軸最大、最小值的小數位的位數，[0-10]

formatNumber 逗號來分隔數字(千位，百萬位),默認為1(True)；若取0,則不加分隔符

decimalSeparator 指定小數分隔符,默認為'.'

thousandSeparator 指定千分位分隔符,默認為','

Tool-tip/Hover標題

showhovercap 是否顯示懸停說明框，默認為1(True)

hoverCapBgColor 懸停說明框背景色，6位16進制顏色值

hoverCapBorderColor 懸停說明框邊框顏色，6位16進制顏色值

hoverCapSepChar 指定懸停說明框內值與值之間分隔符,默認為','

折線圖的參數

lineThickness 折線的厚度

anchorRadius 折線節點半徑，數字

anchorBgAlpha 折線節點透明度，[0-100]

anchorBgColor 折線節點填充顏色，6位16進制顏色值

anchorBorderColor 折線節點邊框顏色，6位16進制顏色值

Set標簽使用的參數

value 數據值

color 顏色

link 鏈接（本窗口打開[Url]，新窗口打開[n-Url]，調用JS函數[JavaScript:函數]）

name 橫向坐標軸標簽名稱

一、介紹

    FusionCharts是一個基於XML和Flash的圖表組件，其中FusionCharts Free是免費的，其功能也十分強大、美觀。

    在線Demo：http://www.fusioncharts.com/free/demos/Blueprint/

    其可以用在PHP、JSP、ASP等等。

FusionCharts Free目前最新的版本3.0 官方下載下來的文件 雖然不收費,但是每次圖表上都有個討厭的連接,所以可愛的破解帝 早早地放出了破解版本,至於在哪能找到, 大家就Google去吧..里面我們要用到的文件上篇已經介紹了,就是幾個.swf 文件和一個js.

上篇介紹了fcf 最基本的創建方式,就是一段簡單的js 腳本,和一個xml數據文件.當然你也可以不寫那段js腳本,

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="500" id="Column3D" > 
　　<param name="movie" value="/FusionCharts/Column3D.swf" /> 
　　<param name="FlashVars" value="&dataURL=Data.xml&chartWidth=600&chartHeight=500"> 
　　<param name="quality" value="high" /> 
　　<embed src="../FusionCharts/FCF_Column3D.swf" flashVars="&dataURL=Data.xml&chartWidth=600&chartHeight=500" 
　　　　　　quality="high" width="600" height="500" name="Column3D"type="application/x-shockwave-flash" 
　　　　　　pluginspage="http://www.macromedia.com/go/getf lashplayer" /> 
</object> 

第一處標紅的地就是 flash的數據模板,第二處是 加載的xml文件的地址了.

這種方式有個壞處,就是在有的瀏覽器打開flash時候有提示 點擊激活控件,,不知道大家見過沒,所以本人推薦用javascript來創建..

上面只是簡單的介紹,下面進入正題:

FCF幾個常用的屬性介紹

FCF的屬性N多,這里我只找幾個常用的來介紹下

FCF 中是用1和0來表示Bool值的.1表示true，0表示false

<chart caption='主標題' subcaption='副標題' animation='1' formatNumberScale='0' numberSuffix='元' pieSliceDepth='30' rotateValues='1' > 
… 
</chart> 

Caption ，subcaption主標題 副標題

Animation:是否啟用動畫, Bool類型

numberSuffix : Y軸單位后綴 numberPrefix:前綴.

formatNumberScale 是否格式化數字,默認為1(True),自動的給你的數字加上K（千）或M（百萬）；若取0,則不加K或M

rotateValues : 顯示的值的形狀, 豎的是1(True)橫向顯示0。

<categories>
<category label='2004' name='2004'/>
....
</categories>

設置X 軸的值

<set name = '2003' value='38000' />

Y軸顯示的數據值,這里的值必須和category的個數對應,而且順序也不能錯,否則數據會顯示錯亂(本人覺得這點fcf做的很不智能,至少應該可以用name對應吧.)

<dataset seriesName='Andrew' >
<set name = '2004' value='36412' />
</dataset>

一個Dataset表示一個項,也就是表示一個圖表上的一個數據。

實例Demo

網上的一些Demo生成的數據都是比較有規律的,無非就一個組合圖或者單系數據顯示,這里就跳過簡單的,做一個復雜點的數據生成,因為實際中統計的數據一般都不會那么有規律。

數據庫表如下:

現在要統計出每人每年的消費情況..數據是沒有規律的,有的人在一些年份上沒有數據,

我們利用FCF的js 來創建圖表, 無非就是要傳遞一個xml數據,或者一個xml格式的字符串.這里我采用了后台生成的方法.

public string GetCharts() {
　　StringBuilder sb = new StringBuilder();
　　sb.Append("<chart caption='主標題' subcaption='副標題' palette='0' animation='1' formatNumberScale='1' numberSuffix='元a'
　　　　　　 　　　　pieSliceDepth='30' rotateValues='1' startingAngle='125'>");
　　sb.Append(DataGeneration.getAccessData());
　　sb.Append("</chart>");
　　return FusionCharts.RenderChart("/Charts/MSColumn3D.swf", "", sb.ToString(), "EmpSalesTotal", "700", "500", false, false);
}

在前台頁面直接掉調用這個方法輸出就可以了。

DataGeneration.getAccessData()

這個就是生成數據的方法了,

 public static string getAccessData(){
     StringBuilder SDataSet = new StringBuilder();
     StringBuilder Scategory = new StringBuilder();
     DataTable table = new DataTable();
     List<AccessDat> list = new List<AccessDat>();
     string sql = "select Names,Years,sum(Sales) as Sales from AccessDat group by Years,Names";
     using (SqlConnection conn = new SqlConnection("Data Source=.;Initial Catalog=TestDb;User ID=sa;Password=sasasa"))
     {
         conn.Open();
         SqlCommand command = new SqlCommand(sql, conn);
         SqlDataReader reader = command.ExecuteReader();
         AccessDat dat = new AccessDat();
         while (reader.Read()){
             dat = new AccessDat(){
                        Names = reader["Names"].ToString(),
                        Sales = reader["Sales"].ToString(),
                        Years = reader["Years"].ToString()
              };
              list.Add(dat);
          }
          reader.Close();
     }
     //Names列表
     var nameList = from item in list group item by item.Names;

 //Years列表
     var yearList = from item in list orderby item.Years descending group item by item.Years;
    //先創建x軸數據，Years為X軸數據
      Scategory.Append("<categories>");
      foreach (var item in yearList){
        Scategory.Append("<category label='" + item.Key + "' name='" + item.Key + "'/>");
      }
      Scategory.Append("</categories>");
      //獲取x軸項數
      int allCount = yearList.Count();
      foreach (var item in nameList){
          SDataSet.Append("<dataset seriesName='" + item.Key + "' >");
          //根據當前循環到的Names 得到該人每年的Sales,列表
          var slaesList = from p in list
                                where p.Names == item.Key
                                orderby p.Years descending
                                group p by p.Years into g
                                select new { g.Key, Sales = g.Select(p => p.Sales).First() };
                //此處注意,為了set的順序和category順序對應,我循環的是yearList,而不是slaesList                
                //如果沒個set的順序不與category對應循環出的數據是不對滴
                foreach (var ys in yearList)
                {
                    //判斷這個年在該人的列表里是否存在.
                    if (!(from p in slaesList where p.Key == ys.Key select p).Any(c => c.Key.Equals(ys.Key)))
                    {
                        SDataSet.Append("<set />");
                    }
                    else
                    {
                        string str = slaesList.Single(p => p.Key == ys.Key).Sales;
                        SDataSet.Append("<set name = '" + ys.Key + "' value='" + str + "' />");
                    }
                }
                SDataSet.Append("</dataset>");
            }
            StringBuilder Xmldata = new StringBuilder();
            Xmldata.Append(Scategory.ToString());
            Xmldata.Append(SDataSet.ToString());
            return Xmldata.ToString();
        }

 

上面代碼基本都寫了注釋,用了一些Lambda 表達式,很是爽. 但本人感覺還應該有更好的寫法, 為了使年份和數值對應上,這樣做的就是不很靈活了,待我再研究研究,如果有高人請指點一下,..

效果圖:

二、常見的圖表類型

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>  

五、單序列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>  

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

舉例：

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

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：

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

<graph numberPrefix='$'>
     <set name='Jan' value='17400' color='0099FF' />
     <set name='Feb' value='19800' color='FF66CC' />
     <set name='Mar' value='21800' color='996600' />
     <set name='Apr' value='23800' color='669966' />
     <set name='May' value='29600' color='7C7CB4' />
     <set name='Jun' value='27600' color='FF9933' />
     <set name='Jul' value='31800' color='CCCC00' />
     <set name='Aug' value='39700' color='9900FF' />
     <set name='Sep' value='37800' color='999999' />
     <set name='Oct' value='21900' color='99FFCC' />
     <set name='Nov' value='32900' color='CCCCFF' />
     <set name='Dec' value='39800' color='669900' />
</graph>

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

 

 

（2）線柱組合圖

FCF_MSColumn2DLineDY.swf    FCF_MSColumn3DLineDY.swf

XML:

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

<graph PYAxisName='Amount' SYAxisName='Quantity' shownames='1' showvalues='0' showLegend='1' rotateNames='0' formatNumberScale='1' decimalPrecision='2' limitsDecimalPrecision='2' divLineDecimalPrecision='3' formatNumber='1' >
   <categories>
      <category name='Ernst...' hoverText='Ernst Handel'/>
      <category name='QUICK...' hoverText='QUICK-Stop'/>
      <category name='Save-...' hoverText='Save-a-lot Markets'/>
      <category name='Hanar...' hoverText='Hanari Carnes'/>
   </categories>
    <dataset seriesname='Amount' showValues='1' color='AFD8F8' parentYAxis='P' numberPrefix='$'>
      <set value='41210.65' />
      <set value='37217.32' />
      <set value='36310.11' />
      <set value='23821.2' />
   </dataset>
    <dataset seriesname='Discount' showValues='0' color='FDC12E' parentYAxis='P' numberPrefix='$'>
      <set value='1202.27254486084' />
      <set value='2736.60256195068' />
      <set value='5047.74497413635' />
      <set value='337.672510147095' />
   </dataset>
   <dataset seriesname='Quantity' showValues='0' color='FF8000' anchorBorderColor='FF8000' parentYAxis='S' lineThickness='9'>
      <set value='1756' />
      <set value='1096' />
      <set value='1817' />
      <set value='478' />
   </dataset>
</graph>

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

 

 

(3)K線圖

FCF_Candlestick.swf

XML:

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

<graph caption='3 Months - As on 04/02/04' yAxisMinValue='24' yAxisMaxValue='29' canvasBorderColor='DAE1E8' canvasBgColor='FFFFFF' bgColor='EEF2FB' numDivLines='9' divLineColor='DAE1E8' decimalPrecision='2' numberPrefix='$' showNames='1' bearBorderColor='E33C3C' bearFillColor='FFFF00' bullBorderColor='1F3165' baseFontColor='444C60' hoverCapBorderColor='DAE1E8' hoverCapBgColor='FFFFFF' rotateNames='0'>
<categories font='' fontSize='10' fontColor='' verticalLineColor='' verticalLineThickness='2'>
<category Name='2004' xIndex='1' showLine='0'/>
<category Name='Feb' xIndex='31' showLine='1'/>
<category Name='March' xIndex='59' showLine='1'/>
</categories>
<data>
<set open='24.6' high='25.24' low='24.58' close='25.19' />
<set open='24.36' high='24.58' low='24.18' close='24.41' />
<set open='24.63' high='24.66' low='24.11' close='24.15' />
<set open='24.53' high='24.84' low='24.01' close='24.5' />
<set open='24.84' high='24.94' low='24.56' close='24.63' />
<set open='24.96' high='25.03' low='24.58' close='24.89' />
<set open='25.25' high='25.46' low='25.11' close='25.13' />
<set open='25.27' high='25.37' low='25.0999' close='25.18' />
<set open='25.33' high='25.43' low='25.06' close='25.16' />
<set open='25.38' high='25.51' low='25.23' close='25.38' />
<set open='25.2' high='25.78' low='25.07' close='25.09' />
<set open='25.66' high='25.8' low='25.35' close='25.37' />
<set open='25.77' high='25.97' low='25.54' close='25.72' />
<set open='26.31' high='26.35' low='25.81' close='25.83' />
<set open='26.23' high='26.6' low='26.2' close='26.35' />
<set open='26.37' high='26.42' low='26.21' close='26.37' />
<set open='26.35' high='26.55' low='26.22' close='26.37' />
<set open='26.63' high='26.69' low='26.35' close='26.39' />
<set open='26.65' high='26.72' low='26.5' close='26.7' />
<set open='26.48' high='26.62' low='26.35' close='26.53' />
<set open='26.63' high='26.65' low='26.41' close='26.5' />
<set open='26.89' high='26.99' low='26.61' close='26.7' />
<set open='26.6' high='26.95' low='26.55' close='26.88' />
<set open='26.75' high='26.76' low='26.4799' close='26.61' />
<set open='26.65' high='26.795' low='26.5' close='26.57' />
<set open='26.9' high='26.98' low='26.43' close='26.46' />
<set open='26.92' high='27.11' low='26.74' close='26.77' />
<set open='26.7' high='27.1' low='26.59' close='26.99' />
<set open='26.98' high='27.06' low='26.5' close='26.59' />
<set open='27.09' high='27.15' low='26.93' close='26.95' />
<set open='26.95' high='27.23' low='26.85' close='27.15' />
<set open='26.86' high='27.15' low='26.82' close='27.02' />
<set open='27.18' high='27.229' low='26.85' close='26.9' />
<set open='27' high='27.19' low='26.93' close='27.08' />
<set open='27.06' high='27.17' low='26.83' close='26.96' />
<set open='27.15' high='27.43' low='27.01' close='27.01' />
<set open='27.42' high='27.55' low='27.18' close='27.29' />
<set open='27.63' high='27.8' low='27.24' close='27.4' />
<set open='27.85' high='27.9' low='27.55' close='27.65' />
<set open='27.78' high='27.95' low='27.57' close='27.91' />
<set open='28.28' high='28.44' low='27.47' close='27.71' />
<set open='28.6' high='28.72' low='28.22' close='28.25' />
<set open='28.49' high='28.83' low='28.32' close='28.8' />
<set open='28.27' high='28.76' low='28.22' close='28.48' />
<set open='28.37' high='28.44' low='27.94' close='28.01' />
<set open='28.13' high='28.3' low='27.85' close='28.3' />
<set open='27.99' high='28.2' low='27.93' close='28.1' />
<set open='27.74' high='27.88' low='27.53' close='27.81' />
<set open='27.55' high='27.72' low='27.42' close='27.54' />
<set open='27.51' high='27.73' low='27.47' close='27.7' />
<set open='27.54' high='27.64' low='27.26' close='27.43' />
<set open='27.67' high='27.73' low='27.35' close='27.57' />
<set open='28.03' high='28.061' low='27.59' close='27.66' />
<set open='28.39' high='28.48' low='28' close='28.16' />
<set open='28.17' high='28.31' low='28.01' close='28.21' />
<set open='28.19' high='28.28' low='28.07' close='28.24' />
<set open='27.73' high='28.18' low='27.72' close='28.14' />
<set open='27.58' high='27.77' low='27.33' close='27.45' />
<set open='27.42' high='27.55' low='27.23' close='27.37' />
<set open='27.41' high='27.55' low='27.4' close='27.52' />
<set open='27.21' high='27.53' low='27.16' close='27.46' />
<set open='27.05' high='27.25' low='27' close='27.21' />
</data>
</graph>

 

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