zoukankan      html  css  js  c++  java
  • Flash图表FusionCharts如何自定义图表导出菜单或界面

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

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

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

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

    定制导出组件的属性

    配置导出组件的属性时,同样需要在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';
    
  • 相关阅读:
    6个实例详解如何把if-else代码重构成高质量代码
    Fiddler抓包工具总结
    thinkphp5 图片上传七牛云
    mysql事件(定时任务)处理超时失效订单
    修改PhpStorm创建Php类文件时头部作者
    sed理论讲解、实战
    sed实战、find实战、grep实战
    通配符、正则表达式、python去重
    python3:requests模块-写了一点
    《流畅的Python》一副扑克牌中的难点
  • 原文地址:https://www.cnblogs.com/shenqi/p/3254427.html
Copyright © 2011-2022 走看看