Fusioncharts API参考方法(Functions)总结

转自：https://www.evget.com/article/2014/5/9/20959.html

• JS图表控件FusionCharts使用教程：自定义图表导出菜单或界面
• JS图表控件FusionCharts使用教程：如何设置图片导出格式
• JS图表控件FusionCharts使用教程：如何高亮显示数据
• JS图表控件FusionCharts使用教程：在图表标绘非连续数据
• JS图表控件FusionCharts使用教程：在图表中显示标识和图片
• JS图表控件FusionCharts使用教程：自定义图表上的垂直线
• JS图表控件FusionCharts使用教程：自定义图表的工具提示
• JS图表控件FusionCharts使用教程：定制图表中的趋势线和趋势区
• JS图表控件FusionCharts使用教程：自定义图表y轴最大/最小值
• JS图表控件FusionCharts使用教程：调整图表百分比大小
• JS图表控件FusionCharts使用教程：使用JavaScript渲染图表（不用Flash）
• JS图表控件FusionCharts使用教程：如何使用JavaScript渲染iPhone/iPod/iPad图表
• JS图表控件FusionCharts使用教程：为JavaScript图表提供数据
• JS图表控件FusionCharts使用教程：使用JavaScript更新图表数据
• FusionCharts使用教程：为图表添加向下钻取链接
• FusionCharts使用教程：事件API总结
• FusionCharts使用教程：Fusioncharts API参考方法(Functions)总结
• 自定义FusionCharts图表右键菜单的各种典型示例
• FusionCharts使用教程：利用HTML表单数据渲染图表
• FusionCharts使用教程：利用XML/JSON属性加载外部LOGO
• FusionCharts使用教程：使用FusionCharts ASP Class创建图表
• FusionCharts使用教程：显示双Y轴
• FusionChart使用教程：数据库的动态数据交互
• FusionCharts使用教程：LinkedCharts实现无限层级向下钻取
• FusionCharts使用教程：图表导出为图像/PDF
• FusionCharts使用教程：利用C#创建各类动态图表
• FusionCharts使用教程：在PHP程序中创建JavaScript图表

chartType()FusionCharts的JavaScript类API提供了大量的功能。下面的列表显示在每个功能的详细信息：

一、FusionCharts的类 - 实例功能

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

绘制图表前，图表配置设置。主要是，您可以使用此功能，使用此功能设置图表消息或电网参数。的名称的结构和配置的值被作为参数传递。在右边的第一个例子。您也可以通过配置对象的功能的集合。参数对象将包含名称和值对配置名称和相应的值。在右边的第二个例子。

1

2

3

4

5

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方法一样，此功能已经过时了的。

1

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

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

主要作用是将新建的图表装载到指定的某个DIV容器内。

1

2

3

4

5

myChart.render("chartContainer");

 

or

 

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

4、setXMLUrl(Url: String)

设置图表实例的XMLUrl参数，主要是用于动态修改数据源xml的路径。

1

myChart.setXMLUrl("mychartdata.xml");

5、setXMLData(XML: string)

主要是设置图表对象XMLData，参数传递为拼接好的图表字符串。

1

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

6、setJSONUrl(Url: String)

设置图表对象JSONUrl参数。

1

myChart.setJSONUrl("myJSONStream.json");

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

动态设置或者修改图表对象的数据，格式为：Json格式的字符串。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

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)

1

2

3

4

5

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对象。因此，正确识别的格式，数据格式作为第二个参数传递。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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

 

or

 

myChart.setChartData( "<chart><setvalue='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字符串。

1

myChart.setDataURL( "myxmlsource.xml" );

11、setDataXML(dataSource: string)

利用此功能可以在设置或更新图表XML数据的字符串。

1

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

12、SetTransparent ( isTransparent: boolean )

使图表背景成为透明的。您将需要设置bgAlpha，canvasBgAlpha等属性的<chart>元素来完成的透明度。该函数接受一个布尔参数。只有为true的时候，背景图才会产生透明效果。

1

2

3

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

 

myChart.setTransparent(true);

13、getChartData(dataFormat:string)

这个函数返回图元数据格式的数据作为参数提供。当传递XML作为数据格式，它提供了XML数据的字符串。 ，当JSON是通过为数据格式，数据被返回的JSON对象。

1

2

3

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

 

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

14、getXMLData()

获取图表的XML数据串。

1

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

15、getJSONData()

获取图表数据的Json对象。

1

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

16、getDataAsCSV()

CSV字符串返回数据的图表。输出CSV字符串，可以使用XML参数配置。 String，表示CSV格式数据的图表。

1

varstrCSV = FusionCharts("myChartId").getDataAsCSV();

17、getXML()

获取图表数据的XML

1

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

18、getChartAttribute()

返回的属性值中指定的图表XML节点或“图表”属性的JSON数据。如果属性是空的，那就是没有找到其XML或者Json数据。

1

2

3

//获取图表的标题

 

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

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

设置图表属性的新值更新图表。它有两个参数。的属性的名称和参数值。顾名思义图表的根属性（也被称为“图表属性”，这是通过<chart>元素在图表的XML数据或图表的JSON数据通过图表财产）。您还可以通过将它们作为一个对象的属性名和值对的集合功能。在右边的第二个例子。一旦图表属性得到改变，drawcomplete的的事件被触发。

1

2

3

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（零）的阵列，其中的索引表示。所以，在一个特定的数组索引“对象实际上等于阵列的索引号的电平数字，这是适用于这些设置。请参阅例如，在右边的底部。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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事件被触发。

1

2

3

myChart.resizeTo( "500", "400" )

or

myChart.resizeTo( "80%", "100%" )

22、exportChart( exportSettings: Object)

调用图表保存为PDF /图片。

1

2

3

myChart.exportChart( { exportFormat : 'jpg'} )

or

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

23、print()

打印图表

1

FusionCharts("myChartId").print()

24、clone( [chartParams: Object] )

该功能可让您复制一个FusionCharts的JavaScript对象和使用它的设置来创建另一个图表。该功能可以选择一个对象作为参数。对象可以包含图表设置之前，它被克隆，这将覆盖现有的源图的设置。该函数返回的FusionCharts JavaScript对的一个实例。

1

2

3

varnewChart = myChart.clone();

or

varnewChart = myChart.clone( { swfUrl : 'Area2D.swf'} );

25、dispose()

删除、清除某个图表实例。此外，该函数将配合BeforeDispose事件，以消除图表和处理后的图表已被删除。

1

FusionCharts("myChartId").dispose();

26、chartType()

这个函数返回的图表类型或图表所呈现的FusionCharts的JavaScript对象的别名。请注意，别名的值是依赖于图表SWF文件名。

1

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

27、isActive()

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

1

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

28、hasRendered()

这个函数返回布尔值，指示是否已完成呈现的图表。hasRendered（）已过时

1

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

29、signature()

它返回一个字符串，代表的签名图。 FusionCharts的XT服务发布4个图表，它是“FusionCharts/3.2.2（XT）SR4”

1

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