利用JavaScript API访问和导出FusionCharts图表数据-控件新闻-慧都网

利用JavaScript API访问和导出FusionCharts图表数据

原创|其它|编辑：郝浩|2013-01-22 11:34:10.000|阅读 529 次

概述：本文主要介绍如何通过FusionCharts图表的JavaScript API来访问和导出图表数据。

本文主要介绍如何通过FusionCharts图表的JavaScript API来访问和导出图表数据。

设置JavaScript图表

当你使用JavaScript API来访问图表数据时，你首先需要确保只有当图表被呈现后你才调用getDataAsCSV（）API。

<HTML>
<HEAD>
<TITLE>FusionCharts & JavaScript - Getting chart data as CSV </TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
//FC_Rendered method is called whenever a FusionCharts chart on the page
//has finished initial rendering. To this function, the chart passes its
//own DOM Id.
function FC_Rendered(DOMId){
//If it's our required chart
if (DOMId=="chart1Id"){
//Get reference to the chart object
var chartObj = FusionCharts("chart1Id");
//Simply alert the CSV Data
window.alert(chartObj.getDataAsCSV());
return;
}
}
</SCRIPT>
</HEAD>
<BODY>
<div id="chart1div"> FusionCharts </div>
<script language="JavaScript">
var chart1 = new FusionCharts("../../FusionCharts/Column3D.swf", "chart1Id", "400", "300", "0", "1");
chart1.setXMLData("<chart><set label='A' value='10' /><set label='B' value='11' /></chart>");
chart1.render("chart1div");
</script>
</BODY>
</HTML>

当你运行上述代码时，你将获取下列截图：

利用JavaScript API导出FusionCharts图表数据

自定义输出CSV

所要导出的CSV数据的自定义属性如下；

属性	描述	举例
exportDataSeparator	设置CSV数据的分隔符。为了便于使用，这些属性接受下列伪代码： {tab} - 指定标签字符。 {quot} - 指定双引号。 {apos} - 要指定单引号。你也可以指定这些伪代码以外的任何字符。	exportDataSeparator='{tab}'
exportDataQualifier	设置CSV数据的限制符。为了便于使用，这个属性接受下列伪代码： {tab} - 指定标签字符。 {quot} - 指定双引号。 {apos} - 指定单引号你也可以指定这些伪代码以外的任何字符。	exportDataQualifier='{quot}'
exportDataFormattedVal	Boolean属性值表示是否输出CSV文件中的数据值（上图所示）。	exportDataFormattedVal='1'