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

Compact Mode: 用于保存单张图片,每一个单独的导出组件实例都代表单独的图表。在这种模式下,只有一个按钮和标题是可见的。

Full Mode: 保存多个图表,无论是单独或作为一个单独的文件。在这种模式下,用户可以选择需要保存的图表以及保存的格式。

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

定制导出组件的属性

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

  1. <div id="fcexpDiv" align="center">
  2. FusionCharts Export Handler Component
  3. </div>
  4. <script type="text/javascript">
  5. var myExportComponent = new FusionChartsExportObject("fcExporter1",
  6. "../../FusionCharts/FCExporter.swf");
  7.  
  8. //Customize the component properties
  9. //Width and height
  10. myExportComponent.componentAttributes.width = '400';
  11. myExportComponent.componentAttributes.height = '60';
  12. //Background color
  13. myExportComponent.componentAttributes.bgColor = 'ffffdd';
  14. //Border properties
  15. myExportComponent.componentAttributes.borderThickness = '2';
  16. myExportComponent.componentAttributes.borderColor = '0372AB';
  17. //Font properties
  18. myExportComponent.componentAttributes.fontFace = 'Arial';
  19. myExportComponent.componentAttributes.fontColor = '0372AB';
  20. myExportComponent.componentAttributes.fontSize = '12';
  21. //Message - caption of export
  22. component myExportComponent.componentAttributes.showMessage = '1';
  23. myExportComponent.componentAttributes.message = 'Export the
  24. chart first, and then click on this button to save';
  25. //Button visual configuration
  26. myExportComponent.componentAttributes.btnWidth = '200';
  27. myExportComponent.componentAttributes.btnHeight= '25';
  28. myExportComponent.componentAttributes.btnColor = 'E1f5ff';
  29. myExportComponent.componentAttributes.btnBorderColor = '0372AB';
  30. //Button font properties
  31. myExportComponent.componentAttributes.btnFontFace = 'Verdana';
  32. myExportComponent.componentAttributes.btnFontColor = '0372AB';
  33. myExportComponent.componentAttributes.btnFontSize = '15';
  34. //Title of button
  35. myExportComponent.componentAttributes.btnsavetitle = 'Save the chart'
  36. myExportComponent.componentAttributes.btndisabledtitle = 'Waiting for export';
  37. //Render the exporter SWF in our DIV
  38. fcexpDiv myExportComponent.Render("fcexpDiv");
  39. </script>

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

Component_Instance.componentAttributes.Parameter_name = 'Value';

示例:

  1. myExportComponent.componentAttributes.width = '400';

Flash图表FusionCharts如何自定义图表导出菜单或界面的更多相关文章

  1. Flash图表控件FusionCharts如何自定义图表的工具提示

    什么是FusionCharts的工具提示 当鼠标指示到FusionCharts图表中一个特定的数据点时所显示出来的信息就是工具提示.提示的信息可以是以下内容: 单系列图(除了饼图和环图):名称和值 饼 ...

  2. Flash图表控件FusionCharts如何自定义图表上的垂直线

    什么是垂直分割线 垂直(或条形图中的水平)分隔线是用来帮助用户分隔数据块的.可以被放置在任何两个数据点,即使是不规则的间隔也可以. <chart caption='Monthly Revenue ...

  3. Python使用Flask框架,结合Highchart,自定义基本上算是最全的导出菜单了

    说用:引入export-data.js文件后,导出菜单中会自动显示出相应的导出选项,只需要在lang中换成中文名即可. 本实例除了包含系统自带的,还包括自定义的导出菜单等. html代码 <!D ...

  4. Flash图表控件FusionCharts自定义图表y轴最大/最小值

    自定义图表y轴的最大值和最小值 用户可以使用FusionCharts图表中<chart>元素的yAxisMaxValue和yAxisMinValue属性设置图表限制. 示例: <ch ...

  5. Python使用Flask框架,结合Highchart,自定义导出菜单项目及顺序

    参考链接: https://www.highcharts.com.cn/docs/export-module-overview https://api.hcharts.cn/highcharts#ex ...

  6. Dynamics CRM教程:图表的Top设置及导出修改和导入

    关注本人微信和易信公众号: 微软动态CRM专家罗勇,回复144或者20150412可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 上一篇博客制作的图表放在Dashb ...

  7. salesforce 零基础学习(二十六)自定义图表chart简单介绍(使用apex和VF实现)

    chart在报表中经常使用到,他可以使报表结果更加直观的展现给用户.salesforce支持VF和apex代码来更好的展示chart. chart分类:常用的图表样式有饼状图,柱状图,折线图,条形图, ...

  8. 自学Zabbix3.8.1.2-可视化Visualisation-Graphs自定义图表

    自学Zabbix3.8.1.2-可视化Visualisation-Graphs自定义图表 自定义图表,如名称所示,提供定制功能.虽然简单的图形可以很好地查看单个项目的数据,但是它们不提供配置功能.因此 ...

  9. (27)zabbix自定义图表Graph

    zabbix提供了一个自定义图表的功能,这不是废话么?呵呵~前面文章 讲到的<zabbix简易图表>只能显示单个item的数据图表.如果我们想显示多个信息到一个图表上,那必须使用zabbi ...

随机推荐

  1. ZigBee简介

    前言 目前,中国大力推广的物联网是zigbee 应用的主战场,物联网通过智能感知.识别技术与普适计算(我还特意申请了个域名psjs.vip).泛在网络的融合应用,被称为继计算机.互联网之后世界信息产业 ...

  2. Oracle创建表,并添加默认值和备注

    create table testemp( id varchar2(50) default sys_guid(),deptno varchar2(20) ,--部门编码 ename varchar2( ...

  3. docker添加阿里云镜像加速器

    .docker添加阿里云镜像加速器 https://blog.csdn.net/chenjin_chenjin/article/details/86674521 .配置阿里云加速器 阿里云会根据账号生 ...

  4. jquery中对于批量deferred的处理

    此代码仿照jquery源码中$.when()的实现 function test(i) { var dfd = $.Deferred(); if(i%2 == 0) { console.log(&quo ...

  5. 用expressjs写RESTful API

    http://blog.csdn.net/kiwi_coder/article/details/36424671     用expressjs写RESTful API http://blog.csdn ...

  6. YOLO3训练widerface数据集

    因为YOLO3速度精度都很棒,所以想训练一下人脸模型,废话不多,进入正题 1写所有的配置文件 1.1 YOLO3-face.cfg 个人感觉YOLO的配置文件骑士和caffe差不多 在cfg/YOLO ...

  7. AngularJS 2.0 学习

    前提: 下载和安装node.js 和 npm. https://nodejs.org/en/download/ npm安装 需要自己google 安装好之后,可以在cmd窗口中查看安装的版本 node ...

  8. 原生js实现一个侧滑删除取消组件(item slide)

    组件,本质上是解决某个问题封装的类,在此记录原生js实现侧滑删除 先上效果图 实现思路 1. 确定渲染的数据结构 2. 思考划分布局,总的有两个主要的模块:内容区域和按钮区域 2.1 内容区域保持宽度 ...

  9. [poj]2488 A Knight's Journey dfs+路径打印

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 45941   Accepted: 15637 Description Bac ...

  10. Python 获取脚本路径以及脚本所在文件夹路径

    import os script_path = os.path.realpath(__file__) script_dir = os.path.dirname(script_path)