`
zzc1684
  • 浏览: 1223115 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

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();

 

分享到:
评论

相关推荐

    FusionCharts API

    在本篇文章中,我们将深入探讨FusionCharts API的核心功能、使用方法以及如何利用它来构建动态数据展示。 一、FusionCharts API概述 FusionCharts API 是由FusionCharts公司开发的一套JavaScript库,支持HTML5/SVG...

    Fusioncharts导出图片所需jar包

    在IT行业中,FusionCharts是一款广泛使用的交互式图表库,它能够帮助开发者创建美观且功能丰富的数据可视化应用。本文将详细讲解如何利用FusionCharts提供的`fcexporter.jar`和`fcexporthandler.jar`这两个关键的...

    FusionCharts2.*版本API及源码

    这个"**FusionCharts2.*版本API及源码**"资源包含了关于FusionCharts 2.x系列版本的API文档、免费版的API介绍以及详细的图表参数大全,是开发者深入理解和使用FusionCharts的关键参考资料。 首先,我们来看**...

    FusionCharts参数及功能特性详解实例

    本文将详细介绍 FusionCharts 的参数及功能特性,以便开发者更好地使用该工具。 一、 animation 动画参数 animation 参数用于控制图表的动画效果,默认值为 1(True),表示启用动画。如果设置为 0(False),则禁用...

    FusionCharts_free API

    ### FusionCharts Free API 知识点详解 #### 一、概述 **FusionCharts Free** 是由 InfoSoft Global 公司开发的一...通过上述详细介绍,希望能够帮助读者更好地理解和掌握 FusionCharts Free 的使用方法及其应用场景。

    FusionCharts教程

    **FusionCharts教程** FusionCharts是一款强大的JavaScript图表库,用于创建交互式、美观的数据可视化效果。本教程将深入探讨FusionCharts的核心概念、安装、配置以及如何在实际项目中应用,旨在帮助初学者快速掌握...

    FusionCharts_XT api

    通过查看和运行这些示例,开发者能快速掌握FusionCharts XT的使用方法。 例如,`Readme.txt`文件可能提供了关于如何运行和理解示例的指导。开发者应按照指南步骤操作,了解API的具体应用。 ### 应用场景 ...

    Fusioncharts31教程整理.pdf

    FusionCharts 是一款强大的图表组件,它...总的来说,FusionCharts是构建数据可视化应用的有力工具,通过掌握其基本原理和使用方法,开发者可以快速创建出美观且功能强大的数据图表,提升数据展示的吸引力和理解度。

    FusionCharts_API_中文帮助文件

    - 错误代码和消息:学习识别并解决FusionCharts API使用中的常见问题。 - 开发者工具:利用浏览器的开发者工具检查图表渲染和网络请求。 9. **示例与实战** - 示例代码:文档中包含大量示例代码,供学习和参考。...

    FusionCharts使用源码例C#

    总结一下,FusionCharts在C#项目中的使用涉及以下几个关键步骤: 1. 引入FusionCharts的JavaScript库。 2. 在C#后端生成图表数据源。 3. 将数据源传递到前端JavaScript代码。 4. 在前端创建FusionCharts对象并渲染...

    fusioncharts swf大全

    - 文档:教程、API参考和常见问题解答,帮助用户更好地理解和使用FusionCharts。 - 示例代码:HTML、JavaScript和XML等代码片段,演示了如何将图表嵌入到网页中。 - 数据文件:可能包含用于展示图表效果的数据样本。...

    FusionCharts free使用手册

    FusionCharts提供了丰富的API接口和方法,如`setDataURL()`, `render()`, `updateData()`, `exportChart()`等,用于图表的动态更新和导出。 9. **兼容性与性能优化** FusionCharts兼容大多数现代浏览器,包括...

    FusionCharts教程大全

    本系列文章主要整理和汇总了Flash图表组件FusionCharts的一些技术文档,希望对FusionCharts使用者有帮助,欢迎交流!

    FusionCharts在Android上的实现

    FusionCharts是一款强大的数据可视化工具,它通过JavaScript库来创建交互式、丰富的图表和图形。在Android平台上实现...同时,持续关注FusionCharts的更新和API文档,以获取最新的特性和改进,以提升用户体验。

    fusioncharts中文教程

    这个中文教程是为那些想要学习如何使用FusionCharts来创建动态、交互式图表的人准备的。以下是对FusionCharts及其相关知识点的详细说明: 1. **FusionCharts介绍**: FusionCharts是一款基于JavaScript和Flash的...

    FusionCharts完整资料集

    "functionCharts导出实例教程.pdf"可能是指FusionCharts的某个特定功能或扩展的导出教程,可以帮助开发者了解如何利用特定API或方法实现图表的导出功能。 综上所述,这个FusionCharts完整资料集是一套完整的自学...

    Asp.net FusionCharts 示范代码演示

    5. **初始化FusionCharts**:在客户端JavaScript中,使用`FusionCharts()`函数初始化图表,传入图表类型和数据源(即XML数据字符串)。 6. **在网页上显示**:将初始化后的FusionCharts对象嵌入到HTML中,通常是在...

    FusionCharts 使用实例

    标题"FusionCharts使用实例"指的是使用FusionCharts这个JavaScript图表库来创建动态、交互式的图表。FusionCharts是一个广泛使用的工具,它允许开发者通过简单的API和丰富的图表类型将复杂的数据可视化,适用于各种...

Global site tag (gtag.js) - Google Analytics