FusionCharts使用教程:Fusioncharts API參考方法(Functions)總結

chartType()FusionCharts的JavaScript類API提供了大量的功能。下面的列表顯示在每個功能的詳細信息:

一、FusionCharts的類 - 實例功能

1、configure(name:string , value:string)  or  configure(configurations: Object)

繪製圖表前,圖表配置設置。主要是,您可以使用此功能,使用此功能設置圖表消息或電網參數。的名稱的結構和配置的值被作爲參數傳遞。在右邊的第一個例子。您也可以通過配置對象的功能的集合。參數對象將包含名稱和值對配置名稱和相應的值。在右邊的第二個例子。

myChart.configure("ChartNoDataText", "Please select a record above");

or

myChart.configure({ "ChartNoDataText" : "Please select a record above" , "InvalidXMLText" : "Please validate data" });

2、addVariable(name:string , value:string)

與configure方法一樣,此功能已經過時了的。

myChart.addVariable("ChartNoDataText", "Please select a record above");

3、render(renderAt: String) or  render(renderAt: HTMLNode)

主要作用是將新建的圖表裝載到指定的某個DIV容器內。

myChart.render("chartContainer");

or

myChart.render(document.getElementById ("chartContainer"));

4、setXMLUrl(Url: String)

設置圖表實例的XMLUrl參數,主要是用於動態修改數據源xml的路徑。

myChart.setXMLUrl("mychartdata.xml");

5、setXMLData(XML: string)

主要是設置圖表對象XMLData,參數傳遞爲拼接好的圖表字符串。

myChart.setXMLData("<chart><set value='100' /></chart>");

6、setJSONUrl(Url: String)

設置圖表對象JSONUrl參數。

myChart.setJSONUrl("myJSONStream.json");

7、setJSONData(JSON:Object)  or setJSONData(JSON:String)

動態設置或者修改圖表對象的數據,格式爲:Json格式的字符串。

myChart.setJSONData( {

"chart":{

"caption":"My Chart Caption"  

},  

"data":[

{  "value":"100" },

{  "value":"200" }

]

}

);

or

myChart.setJSONData('{"chart":{ "caption":"My Chart Caption" }, "data":[ {"value":"100" }, { "value":"200" } ] 

});

8、setChartDataUrl(Url:String, dataFormat: string)

當我們的圖表數據是來自於一個頁面所產生的數據時,我們就可以用此方法。

參數說明:

Url:產生數據的頁面地址

dataFormat:產生數據的格式(xml、json)

myChart.setChartDataUrl("mydynamicdata.aspx", "json");

or

myChart.setChartDataUrl("mydynamicdata.aspx", "xml");

9、setChartData(dataSource: string, dataFormat: string)

設置或者修改圖表數據。這個函數有兩個參數。第一個是數據源中的數據。第二個是DATAFORMAT。數據源可以是XML源的URL,URL JSON源,XML字符串,JSON字符串和JSON對象。因此,正確識別的格式,數據格式作爲第二個參數傳遞。

myChart.setChartData( "myxmldata.jsp" , "xmlurl");

or

myChart.setChartData( "<chart><set value='2310'/></chart>" , "xml");

or

myChart.setChartData( "myjsondata.php" , "jsonurl");

or

myChart.setChartData( "{ chart : {}, data :[{ value : 100 }] }" , "json");

or

myChart.setChartData( { chart : {}, data :[{ value : 100 }] } , "json");

10、setDataURL(Url:string)

利用此功能可以在設置或更新圖表圖表URL的XML數據。這個函數接受一個URL字符串。

myChart.setDataURL( "myxmlsource.xml" );

11、setDataXML(dataSource: string)

利用此功能可以在設置或更新圖表XML數據的字符串。

myChart.setDataXML( "<chart><set value='213' /></chart>");

12、SetTransparent ( isTransparent: boolean )

使圖表背景成爲透明的。您將需要設置bgAlpha,canvasBgAlpha等屬性的<chart>元素來完成的透明度。該函數接受一個布爾參數。只有爲true的時候,背景圖纔會產生透明效果。

myChart.setDataXML( "<chartbgAlpha='0,0'><set value='213' /></chart>");

myChart.setTransparent(true);

13、getChartData(dataFormat:string)

這個函數返回圖元數據格式的數據作爲參數提供。當傳遞XML作爲數據格式,它提供了XML數據的字符串。 ,當JSON是通過爲數據格式,數據被返回的JSON對象。

var myXML = FusionCharts("myChartId").getChartData( "xml");

var myJSONObj = FusionCharts("myChartId").getChartData( "json" );

14、getXMLData()

獲取圖表的XML數據串。

var myXML = FusionCharts("myChartId").getXMLData();

15、getJSONData()

獲取圖表數據的Json對象。

var myJSONObj = FusionCharts("myChartId").getJSONData();

16、getDataAsCSV()

CSV字符串返回數據的圖表。輸出CSV字符串,可以使用XML參數配置。 String,表示CSV格式數據的圖表。

var strCSV = FusionCharts("myChartId").getDataAsCSV();

17、getXML()

獲取圖表數據的XML

var myXML = FusionCharts("myChartId").getXML();

18、getChartAttribute()

返回的屬性值中指定的圖表XML節點或“圖表”屬性的JSON數據。如果屬性是空的,那就是沒有找到其XML或者Json數據。

//獲取圖表的標題

var caption = FusionCharts("myChartId").getChartAttribute( "caption");

19、setChartAttribute(name:string, value:string) or  setChartAttribute(AttributeCollection:Object)

設置圖表屬性的新值更新圖表。它有兩個參數。的屬性的名稱和參數值。顧名思義圖表的根屬性(也被稱爲“圖表屬性”,這是通過<chart>元素在圖表的XML數據或圖表的JSON數據通過圖表財產)。您還可以通過將它們作爲一個對象的屬性名和值對的集合功能。在右邊的第二個例子。一旦圖表屬性得到改變,drawcomplete的的事件被觸發。

myChart.setChartAttribute ( "caption" , "Latest sales report" );
or
chartReference.setChartAttribute( { "palette" : "2", paletteColors : "ACBF72", useRoundEdges : 1 } );

20、configureLink(objConfiguration: Object, level:Number)  or configureLink(arrConfiguration: Array)

通過此功能,您可以將所有您想要的的LinkedCharts配置。您可以通過一個FusionCharts的構造函數接受的所有的屬性。這些圖表屬性將被應用的LinkedCharts。如果沒有提供,LinkedCharts將繼承屬性從父圖表。
此外,您還可以配置的疊加按鈕,使用overlayButton財產。這些設置還可以去另一個對象。configureLink函數可以接受兩種格式的參數:作爲兩個獨立的參數,第一個參數是一個對象,其中包含的所有配置(圖疊加按鈕)。第二個參數接受一個數字表示所配置的水平。第一向下鑽取級別爲0(零)。請參閱例如,在頂部的右側。作爲一個單一的二維索引數組,每個元素是一個對象,它包含所有的圖表和覆蓋按鈕的相關配置。每個向下鑽取級別由第一級是0(零)的陣列,其中的索引表示。所以,在一個特定的數組索引“對象實際上等於陣列的索引號的電平數字,這是適用於這些設置。請參閱例如,在右邊的底部。

myChart.configureLink(
{
swfUrl: 'Charts/Bar2D.swf',
width: '30%',
overlayButton:
{
message: ' x ',
bgColor:'999999',
borderColor: 'cccccc'
}
},
0);
or
myChart.configureLink(
[ {swfUrl: 'Charts/Bar2D.swf'},
{swfUrl: 'Charts/Pie2D.swf'},
{swfUrl: 'Charts/Line2D.swf'},
{swfUrl: 'Charts/Area2D.swf'}
]
);

21、resizeTo(width:String, height:String)

此功能調整現有的圖表。你可以通過寬度和高度值的百分比或像素值(沒有PX後綴)。一旦被調整大小調整大小(FC_Resized)圖表中,drawcomplete事件被觸發。

myChart.resizeTo( "500", "400" )
or
myChart.resizeTo( "80%", "100%" )

22、exportChart( exportSettings: Object)

調用圖表保存爲PDF /圖片。

myChart.exportChart( { exportFormat : 'jpg'} )
or
myChart.exportChart( { exportAtClient: '1', exportFormat: 'PDF' } );

23、print()

打印圖表

FusionCharts("myChartId").print()

24、clone( [chartParams: Object] )

該功能可讓您複製一個FusionCharts的JavaScript對象和使用它的設置來創建另一個圖表。該功能可以選擇一個對象作爲參數。對象可以包含圖表設置之前,它被克隆,這將覆蓋現有的源圖的設置。該函數返回的FusionCharts JavaScript對的一個實例。

var newChart = myChart.clone();
or
var newChart = myChart.clone( { swfUrl : 'Area2D.swf' } );

25、dispose()

刪除、清除某個圖表實例。此外,該函數將配合BeforeDispose事件,以消除圖表和處理後的圖表已被刪除。

FusionCharts("myChartId").dispose();

26、chartType()

這個函數返回的圖表類型或圖表所呈現的FusionCharts的JavaScript對象的別名。請注意,別名的值是依賴於圖表SWF文件名。

var strCharType = FusionCharts("myChartId").chartType();

27、isActive()

此功能檢查是否FusionCharts的SWF是可見的和激活的。返回true或false。

var strCharType = FusionCharts("myChartId").isActive();

28、hasRendered()

這個函數返回布爾值,指示是否已完成呈現的圖表。hasRendered()已過時

var strCharType = FusionCharts("myChartId").hasRendered();

29、signature()

它返回一個字符串,代表的簽名圖。 FusionCharts的XT服務發佈4個圖表,它是“FusionCharts/3.2.2(XT)SR4”

var strCharType = FusionCharts("myChartId").signature();

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章