今天統計價格變化規律的時候找到的一個很好的文檔,很詳細 一、簡介 Ø FusionCharts 是InfoSoft Global 公司的一個產品,InfoSoft Global 公司是專業的Flash 圖形方案提供商,他們還有幾款其他的,基於Flash 技術的產品,都非常的漂亮。 Ø FusionC ...
今天統計價格變化規律的時候找到的一個很好的文檔,很詳細
一、簡介
Ø FusionCharts 是InfoSoft Global 公司的一個產品,InfoSoft Global 公司是專業的Flash 圖形方案提供商,他們還有幾款其他的,基於Flash 技術的產品,都非常的漂亮。
Ø FusionCharts Free 則是FusionCharts 提供的一個免費版本,雖然免費,功能依然強大,圖形類型依然豐富。
Ø FusionCharts free 是一個跨平臺,跨瀏覽器的flash 圖表組件解決方案,能夠被ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 簡單HTML 頁面甚至PPT 調用。
Ø FusionCharts free新版本中所做的改動:
• 增加了使用jsp 和Ruby on Rails 來集成FusionCharts 的代碼和文檔。
• FusionCharts DOM 更加容易地把圖表載入到頁面上。
• 修改了.Net 的使用代碼和文檔。
• 增加了新的PHP API ,並修複了一些BUG。
• 修改了FusionCharts.js ,以便可以支持雙引號。
• 增加了在FusionCharts 使用UTF-8 編碼的示例。
二、部分效果展示
三、報表圖形對應的swf文件分類
圖形類型 |
文件名 |
Single Series Charts(單系列圖形) |
|
Column 3D |
FCF_Column3D.swf |
Column 2D |
FCF_Column2D.swf |
Line 2D |
FCF_Line.swf |
Area 2D |
FCF_Area2D.swf |
Bar 2D |
FCF_Bar2D.swf |
Pie 2D |
FCF_Pie2D.swf |
Pie 3D |
FCF_Pie3D.swf |
Doughnut 2D |
FCF_Doughnut2D.swf |
Multi-series Charts(多系列圖形) |
|
Multi-series Column 2D |
FCF_MSColumn2D.swf |
Multi-series Column 3D |
FCF_MSColumn3D.swf |
Multi-series Line 2D |
FCF_MSLine.swf |
Multi-series Bar 2D |
FCF_MSBar2D.swf |
Multi-series Area 2D |
FCF_MSArea2D.swf |
Stacked Charts(堆棧圖) |
|
Stacked Column 3D |
FCF_StackedColumn3D.swf |
Stacked Column 2D |
FCF_StackedColumn2D.swf |
Stacked Bar 2D |
FCF_StackedBar2D.swf |
Stacked Area 2D |
FCF_StackedArea2D.swf |
Combination Charts(組合圖) |
|
Multi-series Column 3D + Line - Dual Y Axis |
FCF_MSColumn2DLineDY.swf |
Multi-series Column 3D + Line - Dual Y Axis |
FCF_MSColumn3DLineDY.swf |
Financial Charts(財經圖,即蠟燭圖) |
|
Candlestick Chart |
FCF_Candlestick.swf |
Funnel Chart(漏斗圖) |
|
Funnel Chart |
FCF_Funnel.swf |
Gantt Chart(甘特圖) |
|
Gantt Chart |
FCF_Gantt.swf |
四、安裝使用
1. 在web項目目錄下新建一個文件夾( 如FusionCharts),並把所有的SWF 文件都拷貝到這個文件夾里。
2. 在頁面導入FusionCharts.js 文件,如:
<script type="text/javascript" src="FusionCharts.js"></script>
3. js載入數據生成報表(有兩種方法)
方法一:xml文件引用法
(1)定義一個固定格式的xml文件(以Data.xml為例)
Date.xml的內容如下:
<graph caption='每月銷售額柱形圖' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'> <set name='一月' value='462' color='AFD8F8' /> <set name='二月' value='857' color='F6BD0F' /> <set name='三月' value='671' color='8BBA00' /> <set name='四月' value='494' color='FF8E46' /> <set name='五月' value='761' color='008E8E' /> <set name='六月' value='960' color='D64646' /> <set name='七月' value='629' color='8E468E' /> <set name='八月' value='622' color='588526' /> <set name='九月' value='376' color='B3AA00' /> <set name='十月' value='494' color='008ED6' /> <set name='十一月' value='761' color='9D080D' /> <set name='十二月' value='960' color='A186BE' /> </graph> |
(2) js載入方法,代碼如下:
<div id=”chartdiv1”></div> <script type="text/javascript"> |
方法二:字元串載入法
(1) 定義一個有固定格式的字元串,即可以將上述xml文件組合成字元串
var dataXml = “<graph caption='每月銷售額柱形圖' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'><set name='一月' value='462' color='AFD8F8' /><set name='二月' value='857' color='F6BD0F' /><set name='三月' value='671' color='8BBA00' /><set name='四月' value='494' color='FF8E46' /><set name='五月' value='761' color='008E8E' /><set name='六月' value='960' color='D64646' /><set name='七月' value='629' color='8E468E' /><set name='八月' value='622' color='588526' /><set name='九月' value='376' color='B3AA00' /><set name='十月' value='494' color='008ED6' /><set name='十一月' value='761' color='9D080D' /><set name='十二月' value='960' color='A186BE' /></graph>”; |
(2)js載入方法,代碼如下:
<div id=”chartdiv1”></div> <script type="text/javascript"> |
解析:操作步驟:
<1>建立對象:
用四個參數建立了一個FusionCharts對象,
var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");
第一個參數是SWF文件的地址。
第二個是圖形的id。這個id可以隨便叫什麼,但是要註意,當一個頁面里有多個圖形的時候,這個id一定要是唯一的。
第三個參數是圖形的寬。
第四個參數是圖形的高。
<2> 載入數據:
第一種載入方法需要設置數據文件的地址。如:
myChart.setDataURL("Data.xml");
第二種載入方法需要設置對應的字元串。如:
myChart2.setDataURL(dataXml); //dataXml為字元串
<3> 把圖形渲染在指定的地方。
myChart.render("chartdiv");
"chartdiv"就是前面的DIV的id,這就表示把圖形render到"chartdiv",即Flash圖形就出現在這個id為"chartdiv1"的DIV里。
四、引起flash圖像不能顯示的可能原因
(一)如果沒有在頁面上看到圖形,可能是下麵的原因之一:
1. SWF沒有放到正確的文件夾。
2. 在html文件里,SWF的路徑設置不正確。
3. 沒有安裝Flash Player。
4. 沒有啟用瀏覽器Flash播放選項。
(二)如果你得到了一個“Error in Loading Data”的消息,可能是:
1. xml文件沒放到正確的文件夾。
2. xml的文件名不正確。比如,你可能不小心把它命名Data.xml.txt。
(三)如果你得到了一個“Invalid XML Data”的消息,可能是:
1. xml文件里的內容有錯誤。
五、特殊字元
在FCF里,一些特殊的編碼都需要經過編碼。如:
“€”歐元符號 ——— 需要用“%80”替換
“£”英鎊符號 ——— 需要用“%A3”替換
“¥”人名幣符號—— 需要用“%A5”替換
“¢”分符號 ————需要用“%A2”替換
“%”百分號 ———— 需要用“%25”替換
“&”連字元 ———— 需要用“&”替換
“>”大於號 ———— 需要用“>”替換
“'”單引號 ———— 需要用“'”替換
如果要顯示雙引號,直接使用就可以了,前提是屬性值是用單引號括起來的。如果屬性值是用雙引號括起來的,要顯示單引號,也可以直接使用,而不必用“'”來替換它。
五、屬性參數大全
FusionCharts的XML標簽屬性有以下四種數據類型:
* Boolean - 布爾類型,只能為1或者0。例如:<graph showNames=’1’>
* Number - 數字類型,只能為數字。例如:<graph yAxisMaxValue=’200’>
* String - 字元串類型,只能為字元串。例如:<graph caption=’My Chart’ >
* HexColorCode - 六進位顏色代碼,前邊沒有‘#’。例如:<graph bgColor=’FFFFDD’>
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
1. 功能特性
animation …………………………[bool]是否動畫顯示數據,預設為1(True)
palette …………………………… [number]使用預設的調色板(1-5)
showNames ………………………[bool]是否顯示橫向坐標軸(x軸)標簽名稱
showLables ………………………[bool]是否顯示標簽,預設為1(True)顯示(set中有lable屬性時)
rotateNames ………………………[bool]是否旋轉顯示標簽(name),預設為0(False):橫向顯示
rotateLabels ………………………[bool]設置x軸上的lable顯示方式,預設為0橫向顯示
showValues ………………………[bool]是否在圖表顯示對應的數據值,預設為1(True)
yAxisMinValue ………………… [number]指定縱軸(y軸)最小值,數字
yAxisMaxValue ………………… [number] 指定縱軸(y軸)最小值,數字
showLimits ………………………[bool]是否顯示圖表限值(y軸最大、最小值),預設為1(True)
labelDisplay ………………………[string ]標簽的呈現方式[“WRAP”,”STAGGER”,”ROTATE”,
“NONE”](超長屏蔽、折行、傾斜、不顯示)
staggerLines …………………… [number]多少個字元後折行(labelDisplay=’stagger’)
rotateValues ………………………[bool]是否滾動顯示值 (showValues=’1’)
showYAxisValues …………………[bool]是否顯示y軸數據
yAxisValuesStep ………………… [number]y軸標記的顯示間隔
adjustDiv …………………………[bool]自動調整divlines
clickURL …………………………[string]圖表的焦點鏈接地址
defaultAnimation …………………[bool]是否開啟預設動畫
connectNullData …………………[bool]是否呈現空值(?)
slantLabels ……………………… [bool]
showDivLineValues ………………[bool]
rotateYAxisName …………………[bool]
yAxisNameWidth ……………… [number] (In Pixels)
labelStep ……………………… [number] (1 or above)
setAdaptiveYMin
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
2. 圖表標題和軸名稱
caption ………………………… [string]圖表主標題
subCaption ………………………[string] 圖表副標題
xAxisName …………………… [string]橫向坐標軸(x軸)名稱
yAxisName ……………………[string] 縱向坐標軸(y軸)名稱
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
3. 圖表和畫布的樣式
bgColor ……………………[color]圖表背景色,可以使用逗號分割多個顏色值 6位16進位顏色值
bgRatio ………………………[number]多個顏色值所占的比率,[0-100]
bgAngle ………………………[number]角度,[0-360]
bgSWF ……………………… [string] 設置一個外部的Flash 為flash的背景(須在同一個域下)
bgSWFAlpha …………………[number] 背景flash透明度,[0-100]
bgAlpha……………………… [number]設置圖表背景透明度,[0-100]
shadowAlpha …………………[number]投影透明度,[0-100]
showLegend ………………… [bool]是否顯示系列名,預設為1(True)
canvasBgColor …………………[color]畫布背景色,6位16進位顏色值
canvasBgAlpha …………………[number]畫布透明度,[0-100] 0為不透明
canvasBorderColor …………… [color]畫布邊框顏色,6位16進位顏色值
canvasBorderThickness …………[number]畫布邊框厚度,[0-100]
canvasBaseColor ……………… [color]設置圖表基部的顏色,6位16進位顏色值
canvasBaseDepth ……………… [number]設置圖表基部的高度
canvasBgDepth …………………[number]設置圖表背景的深度
showCanvasBg …………………[bool]設置是否顯示圖表背景
showBorder …………………… [bool]畫布透明度,預設為1顯示
showCanvasBase ………………[bool]設置是否顯示圖表基部
pieFillAlpha ……………………[number]各色塊填充顏色的深度
pieSliceDepth …………………[bool]設置各個色塊間隔線的寬度(不能與pieBorderAlpha同用)
useRoundEdges ……………… [bool]設置圖表圖形邊角是否是為圓角,預設為0不是
chartLeftMargin ……………… [number]設置圖表左邊距,像素
chartRightMargin ………………[number]設置圖表右邊距,像素
chartTopMargin ……………… [number]設置圖表上邊距,像素
chartBottomMargin ……………[number]設置圖表下邊距,像素
canvasBgRatio …………………[ ?]
canvasBgAngle …………………[number]
borderColor ……………………[color]
borderThickness ……………… [number]
borderAlpha ……………………[number]
canvasBorderAlpha ……………[number]
captionPadding …………………[?]
xAxisNamePadding ……………[?]
yAxisNamePadding ……………[?]
yAxisValuesPadding ……………[?]
labelPadding ……………………[?]
valuePadding ……………………[?]
canvasPadding
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
4. 字體屬性
baseFont ………………………[string]圖表字體樣式,如“宋體”、“黑體”
baseFontSize ………………… [number]圖表字體大小
baseFontColor …………………[color]圖表字體顏色,6位16進位顏色值
outCnvBaseFont ………………[string]圖表畫布以外的字體樣式
outCnvBaseFontSize ………… [number]圖表畫布以外的字體大小
outCnvBaseFontColor ……… [color]圖表畫布以外的字體顏色,6位16進位顏色值
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
5. 分區線和網格
numDivLines ……………………[string]畫布內部水平分區線條數,數字
divLineColor ……………………[string]水平分區線顏色,6位16進位顏色值
divLineThickness ……………… [string]水平分區線厚度,[1-5]
divLineAlpha ……………………[string]水平分區線透明度,[0-100]
showAlternateHGridColor ………[string]是否在橫向網格帶交替的顏色,預設為0(False)
alternateHGridColor ……………[string]橫向網格帶交替的顏色,6位16進位顏色值
alternateHGridAlpha ……………[string]橫向網格帶的透明度,[0-100]
showDivLineValues …………… [string]是否顯示Div行的值,預設??
numVDivLines ………………… [string]畫布內部垂直分區線條數,數字
vDivLineColor ………………… [string]垂直分區線顏色,6位16進位顏色值
vDivLineThickness ………………[string]垂直分區線厚度,[1-5]
vDivLineAlpha ……………………[string]垂直分區線透明度,[0-100]
showAlternateVGridColor ………[string]是否在縱向網格帶交替的顏色,預設為0(False)
alternateVGridColor …………… [string]縱向網格帶交替的顏色,6位16進位顏色值
alternateVGridAlpha …………… [string]縱向網格帶的透明度,[0-100]
plotGradientColor ………………[color]漸變顏色,6位16進位顏色值
plotBorderDashed ………………[string]bool 是否使用虛線(柱形圖邊界線)
divLineIsDashed ……………… [bool]畫布背景線條是否為虛線
alternateHGridColor ……………[color] 畫布背景橫向線條之間交替出現的顏色
showPlotBorder …………………[bool]
plotBorderColor …………………[color]
plotBorderThickness ……………[number][0-5]
plotBorderAlpha …………………[number]
plotBorderDashLen ……………[number] pixels
plotBorderDashGap ……………[number] pixels
plotFillAngle ………………… [number] [0-360]
plotFillRatio ……………………[number] [0-100]
plotFillAlpha ……………………[number]
showShadow ……………………[bool]是否顯示陰影
plotFillColor ……………………[color]
Anchors …………………………[?]
drawAnchors ……………………[bool]
anchorSides ……………………[number]邊數[3-20]
anchorRadius ………………… [number] pixels 半徑
anchorBorderColor …………… [color]
anchorBorderThickness …………[number]
anchorBgColor ……………… [string]
anchorAlpha ……………………[number]
anchorBgAlpha …………………[number]
divLineDashLen ……………… [?]
divLineDashGap ……………… [?]
zeroPlaneColor …………………[color]
zeroPlaneThickness ……………[number]
zeroPlaneAlpha …………………[number]
showAlternateHGridColor ………[color]
alternateHGridAlpha ……………[number]
vDivLineIsDashed ………………[?]
vDivLineDashLen ………………[?]
vDivLineDashGap ………………[?]
showAlternateVGridColor ………[color]
alternateVGridColor …………… [color]
alternateVGridAlpha ……………[number]
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
6. 數字格式
numberPrefix ……………………[string]增加數字首碼
numberSuffix ……………………[string]增加數字尾碼
formatNumberScale …………… [bool]是否格式化數字,預設為1(True),自動的給你的數字加上K(千)或M(百萬);若取0,則不加K或M
decimalPrecision …………………[number]指定小數位的位數,[0-10] 例如:='0' 取整
divLineDecimalPrecision …………[number]指定水平分區線的值小數位的位數,[0-10]
limitsDecimalPrecision ………… [number]指定y軸最大、最小值的小數位的位數,[0-10]
formatNumber ……………………[number]逗號來分隔數字(千位,百萬位),預設為1(True);若取0,則不加分隔符
decimalSeparator …………………[number]指定小數分隔符,預設為'.'
thousandSeparator ………………[number]指定千分位分隔符,預設為','
decimalSeparator ……………… [number]用指定的字元來代替小數點
thousandSeparato ……………… [number]用指定的字元來代替千位分隔符
decimals …………………………[number]設置滑鼠懸停在圖表上顯示百分比的精確度[0-10]
(不能與formatNumberScale='0' formatNumber='0'同用)
defaultNumberScale …………… [string]
numberScaleUnit ……………… [string]
numberScaleValue ………………[string]
inDecimalSeparator …………… [string]
inThousandSeparator ……………[string]
forceDecimals ……………………[bool]
yAxisValueDecimals ……………[number] [0-10]
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
7. Tool-tip/Hover標題
Showhovercap ………………… [bool]是否顯示懸停說明框,預設為1(True)
hoverCapBgColor ………………[color]懸停說明框背景色,6位16進位顏色值