彩票走势图

JS图表控件FusionCharts使用教程:自定义图表导出菜单或界面

原创|使用教程|编辑:郝浩|2013-08-12 11:43:19.000|阅读 4005 次

概述:FusionCharts的导出组件界面有两种模式,本次的教程将对如何自定义FusionCharts图表的菜单和界面进行详细说明,并附上示例代码。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

FusionCharts的导出组件界面有两种模式:

  • Compact Mode: 用于保存单张图片,每一个单独的导出组件实例都代表单独的图表。在这种模式下,只有一个按钮和标题是可见的。
  • Full Mode: 保存多个图表,无论是单独或作为一个单独的文件。在这种模式下,用户可以选择需要保存的图表以及保存的格式。

在两种模式下,你可以自定义导出组件的颜色、字体和标题。在进入属性之前,先快速看一下导出组件的各种元素。如下图所示:

Flash图表控件FusionCharts使用教程:自定义图表导出菜单或界面

》》》免费下载FusionCharts最新版

定制导出组件的属性

配置导出组件的属性时,同样需要在JavaScript中指定(其中的导出组件已经被初始化)。示例代码如下所示:

<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>

经过上面的操作之后,导出组件的各种参数就已经完成指定了。需要遵循以下语法:

Component_Instance.componentAttributes.Parameter_name = 'Value';

示例:

myExportComponent.componentAttributes.width = '400';

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP