JS圖表控件FusionCharts使用教程：自定義圖表導(dǎo)出菜單或界面

FusionCharts的導(dǎo)出組件界面有兩種模式：

• Compact Mode: 用于保存單張圖片,每一個(gè)單獨(dú)的導(dǎo)出組件實(shí)例都代表單獨(dú)的圖表。在這種模式下,只有一個(gè)按鈕和標(biāo)題是可見的。
• Full Mode: 保存多個(gè)圖表,無論是單獨(dú)或作為一個(gè)單獨(dú)的文件。在這種模式下,用戶可以選擇需要保存的圖表以及保存的格式。

在兩種模式下,你可以自定義導(dǎo)出組件的顏色、字體和標(biāo)題。在進(jìn)入屬性之前,先快速看一下導(dǎo)出組件的各種元素。如下圖所示:

》》》免費(fèi)下載FusionCharts最新版

定制導(dǎo)出組件的屬性

配置導(dǎo)出組件的屬性時(shí),同樣需要在JavaScript中指定(其中的導(dǎo)出組件已經(jīng)被初始化)。示例代碼如下所示:

<div id="fcexpDiv" align="center">
     FusionCharts Export Handler Component
</div>
<script type="text/javascript">
     var myExportComponent = new FusionChartsExportObject("fcExporter1",
                             "../../FusionCharts/FCExporter.swf");

//Customize the component properties 
//Width and height
 myExportComponent.componentAttributes.width = '400';
 myExportComponent.componentAttributes.height = '60';
//Background color
 myExportComponent.componentAttributes.bgColor = 'ffffdd';
//Border properties
 myExportComponent.componentAttributes.borderThickness = '2';
 myExportComponent.componentAttributes.borderColor = '0372AB';
//Font properties
 myExportComponent.componentAttributes.fontFace = 'Arial';
 myExportComponent.componentAttributes.fontColor = '0372AB';
 myExportComponent.componentAttributes.fontSize = '12';
//Message - caption of export
 component myExportComponent.componentAttributes.showMessage = '1';
 myExportComponent.componentAttributes.message = 'Export the
   chart first, and then click on this button to save';
//Button visual configuration
 myExportComponent.componentAttributes.btnWidth = '200';
 myExportComponent.componentAttributes.btnHeight= '25';
 myExportComponent.componentAttributes.btnColor = 'E1f5ff';
 myExportComponent.componentAttributes.btnBorderColor = '0372AB';
//Button font properties
 myExportComponent.componentAttributes.btnFontFace = 'Verdana';
 myExportComponent.componentAttributes.btnFontColor = '0372AB';
 myExportComponent.componentAttributes.btnFontSize = '15';
//Title of button
 myExportComponent.componentAttributes.btnsavetitle = 'Save the chart'
 myExportComponent.componentAttributes.btndisabledtitle = 'Waiting for export'; 
//Render the exporter SWF in our DIV
 fcexpDiv myExportComponent.Render("fcexpDiv");
</script>

經(jīng)過上面的操作之后,導(dǎo)出組件的各種參數(shù)就已經(jīng)完成指定了。需要遵循以下語法:

Component_Instance.componentAttributes.Parameter_name = 'Value';

示例:

myExportComponent.componentAttributes.width = '400';