FusionCharts的使用方法（超詳細）

時間 2019-11-10

標籤 fusioncharts 使用方法詳細简体版

原文原文鏈接

今天統計價格變化規律的時候找到的一個很好的文檔，很詳細javascript

1、簡介html

Ø FusionCharts 是InfoSoft Global 公司的一個產品，InfoSoft Global 公司是專業的Flash 圖形方案提供商，他們還有幾款其餘的，基於Flash 技術的產品，都很是的漂亮。java

Ø FusionCharts Free 則是FusionCharts 提供的一個免費版本，雖然免費，功能依然強大，圖形類型依然豐富。web

Ø FusionCharts free 是一個跨平臺，跨瀏覽器的flash 圖表組件解決方案，可以被ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 簡單HTML 頁面甚至PPT 調用。canvas

Ø FusionCharts free新版本中所作的改動：瀏覽器

• 增長了使用jsp 和Ruby on Rails 來集成FusionCharts 的代碼和文檔。jsp

• FusionCharts DOM 更加容易地把圖表加載到頁面上。ide

• 修改了.Net 的使用代碼和文檔。函數

• 增長了新的PHP API ,並修復了一些BUG。post

• 修改了FusionCharts.js ，以即可以支持雙引號。

• 增長了在FusionCharts 使用UTF-8 編碼的示例。

2、部分效果展現

3、報表圖形對應的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

4、安裝使用

1. 在web項目目錄下新建一個文件夾( 如FusionCharts)，並把全部的SWF 文件都拷貝到這個文件夾裏。

2. 在頁面導入FusionCharts.js 文件，如：

3. js加載數據生成報表(有兩種方法)

方法一：xml文件引用法

(1)定義一個固定格式的xml文件（以Data.xml爲例）

Date.xml的內容以下：

</graph>　

(2) js加載方法，代碼以下：

方法二：字符串加載法

（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加載方法，代碼以下：

解析：操做步驟：

<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裏。

4、引發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文件裏的內容有錯誤。

5、特殊字符

在FCF裏，一些特殊的編碼都須要通過編碼。如：

「€」歐元符號 ——— 須要用「%80」替換

「￡」英鎊符號 ——— 須要用「%A3」替換

「￥」人名幣符號—— 須要用「%A5」替換

「￠」分符號 ————須要用「%A2」替換

「%」百分號 ———— 須要用「%25」替換

「&」連字符 ———— 須要用「&」替換

「>」大於號 ———— 須要用「>」替換

「'」單引號 ———— 須要用「'」替換

若是要顯示雙引號，直接使用就能夠了，前提是屬性值是用單引號括起來的。若是屬性值是用雙引號括起來的，要顯示單引號，也能夠直接使用，而沒必要用「'」來替換它。

5、屬性參數大全

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進制顏色值

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

hoverCapSepChar ………………[string]指定懸停說明框內值與值之間分隔符,默認爲','

showToolTip ……………………[bool]

toolTipBgColor …………………[color] 6位16進制顏色值

toolTipBorderColor …………… [color] 6位16進制顏色值

toolTipSepChar …………………[string]

<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>

8. 折線圖的參數

lineThickness ……………………[number]折線的厚度

anchorRadius ……………………[number]折線節點半徑，數字

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

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

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

多條折線中<dateset>的參數：

Seriesname ……………………[string]折線的名稱

color ………………………… [color]折線的顏色

showValue …………………… [bool]是否顯示折線的節點值

showName ………………………[bool]是否顯示折線的名稱

alpha ………………………… [number]折線的透明度

anchorAlpha ……………………[bool]是否顯示折線的節點，默認爲0不顯示

lineThickness …………………[number]折線的厚度

<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>

9. Set標籤使用的參數

value ……………………………[number/string]設置在圖表中各個名字想對應的值

color ……………………………[color]置在圖表中相對應的柱行圖的顏色

name ……………………………[number/string]橫向座標軸標籤名稱

showName …………………… [bool]設置在是否顯示圖表中相對應X軸的name，默認爲1顯示

hoverText …………………… [string]設置鼠標旋停在相對應圖表上出現的文本內容

alpha ………………………… [number]設置在圖表中相對應的柱行圖的透明度

link ……………………………[string]設置該柱行圖的連接地址（須要URL Encode重編碼）（本窗口打開[Url]，新窗口打開[n-Url]，調用JS函數[JavaScript:函數]）

thickness ………………………[number]

toolText ……………………… [string]

showLavel ……………………[?]

showValue ……………………[bool]

dashed ……………………… [?]

alpha …………………………[?]

anchorSides …………………[?]

anchorRadius …………………[?]

anchorBorderColor ……………[color]

anchorBorderThickness ………[number]

anchorBgColor ………………[color]

anchorAlpha …………………[number]

anchorBgAlpha ………………[number]

dashLen ………………………[?]

dashGap ………………………[?]

startValue ……………………[?]

endValue ……………………[?]

displayValue ……………… [?]

isTrendZone ……………… [?]

showOnTop ……………… [?]

valueOnRight ………………[?]

例1：

例2：

</trendLines>

<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>

6、Object

ANCHORS 錨點用於標識line或area的數值點

支持效果 Animation 動畫、Shadow 陰影、Glow 發光、Bevel 傾斜、Blur 模糊

動畫屬性 _alpha、_x、_y、_xScale、_yScale

BACKGROUND 整個圖表的背景

支持屬性 Animation、Shadow、Glow、Bevel、Blur

動畫屬性 _alpha、_x、_y、_xScale、_yScale

CANVAS 區域圖中的區域

支持屬性 Animation、Shadow、Glow、Bevel、Blur

動畫屬性 _alpha、_x、_y、_xScale、_yScale

CAPTION 圖表標題

SUBCAPTION 圖表子標題

支持屬性 Animation、Shadow、Glow、Bevel、Blur、Font 字體

動畫屬性 _alpha、_x、_y

DATALABELS 數據的x軸標籤列表

支持屬性 Animation、Shadow、Glow、Bevel、Blur、Font 字體

動畫屬性 _alpha、_x、_y

DATAPLOT 數據細節（如：2D圖表中的列）

支持屬性 Animation、Shadow、Glow、Bevel、Blur

動畫屬性 _alpha、_x、_y、_xScale、_yScale

DATAVALUES 圖表數據

支持屬性 Animation、Shadow、Glow、Bevel、Blur、Font 字體

動畫屬性 _alpha、_x、_y

DIVLINES 水平的列表區域(由div組成的線)

支持屬性 Animation、Shadow、Glow、Bevel、Blur

動畫屬性 _alpha、_x、_y、_xScale

HGRID 水平的兩個列表區域中交替的顏色

支持屬性 Animation、Shadow、Glow、Bevel、Blur

動畫屬性 _alpha、_x、_y、_xScale、_yScale

VDIVLINES 垂直的列表區域

VGRID 垂直的兩個列表區域中交替的顏色

VLINES 垂直分割線

XAXISNAME x軸名稱

YAXISNAME y軸名稱

YAXISVALUES y軸的值列表

TOOLTIP 在鼠標移動到數據點上的時候的提示

支持屬性 Font

TRENDLINES 趨勢線

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。