zoukankan      html  css  js  c++  java
  • FusionChart 保存图片 小强斋


    FusionChartsV3.2导出图片

     

    一、必须的FusionCharts文件

    1、图形Swf文件:将Download Package>Charts目录下需要的图形swf(如Pie2D.swf)文件拷贝到系统的web的特定目录(/WebRoot/FusionCharts/)下。

    2、FusionChartsJavaScript class:FusionCharts.js,将其从Download Package>Charts拷贝到WebRoot/FusionCharts/下。

    3、FusionChartsExport Handlers(服务器端):参见Download Package >ExportHandlers >J2EE目录,配置方法见二。

    4、FusionChartsExport Component(客户端):FCExporter.swf,路径为Download Package > Charts,拷贝到/WebRoot/FusionCharts下。

    5、FusionChartsExport Component JavaScript class:FusionChartsExportComponent.js,将其从Download Package>Charts拷贝到/WebRoot/FusionCharts/下。

     

    二、FusionCharts Export Handlers(服务器端)配置

    在服务器端需要二个文件:

    1. fcexporter.jar (contains all the dependency classes)

    2. fcexporthandler.jar (contains the export handler servlet andresources):

    配置过程:

    1、拷贝文件:将Download Package >ExportHandlers > j2EE下的fcexporter.jar、fcexporthandler.jar拷贝到WEB-INF/lib下,将

    2、配置web.xml

      <servlet>
    		<display-name>FCExporter</display-name>
    		<servlet-name>FCExporter</servlet-name>
    		<servlet-class>com.fusioncharts.exporter.servlet.FCExporter</servlet-class>
    		<load-on-startup>1</load-on-startup>
    	</servlet>
    	<servlet-mapping>
    		<servlet-name>FCExporter</servlet-name>
    		<url-pattern>/FCExporter</url-pattern>
    	</servlet-mapping>

    增加FCExporter servlet映射到应用配置web文件:

    三、FusionCharts显示图形JSP文件(html文件也可以)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>FusionCharts v3.2- Client-side Export</title>
    		<script type="text/javascript" language="Javascript" src="./FusionCharts/FusionCharts.js"></script>
    		<script type="text/javascript" language="JavaScript" src="./FusionCharts/FusionChartsExportComponent.js"></script>
    	</head>
    	<body>
    
    		<h2 class="headline">
    			FusionCharts Client-side Export
    		</h2>
    
    		<div id="chartContainer" align="center">
    		</div>
    		<div id="fcexpDiv" align="center">
    		</div>
    
    		<script type="text/javascript">
                                var myChart = new FusionCharts("./FusionCharts/Column2D.swf", "myChartId", "400", "300", "0", "1");
                                myChart.setXMLUrl("SimpleExample.xml");
                                myChart.render("chartContainer");
    
                                var myExportComponent = new FusionChartsExportObject("fcExporter", "./FusionCharts/FCExporter.swf");
                                myExportComponent.Render("fcexpDiv");
          </script>
    
    	</body>
    </html>
    

    四、数据XML文件配置

    <chart yAxisName='Sales Figure' caption='Top 5 Sales Person' numberPrefix='$' useRoundEdges='1' 
    bgColor='FFFFFF,FFFFFF' showBorder='0' exportEnabled='1' exportAtClient='1' exportHandler='fcExporter'>
    	<set label='Alex' value='25000'  /> 
    	<set label='Mark' value='35000' /> 
    	<set label='David' value='42300' /> 
    	<set label='Graham' value='35300' /> 
    	<set label='John' value='31300' /> 
    </chart>

    XML文件中的exportHandler='fcExporter'  和jsp中

    var myExportComponent = new FusionChartsExportObject("fcExporter", "./FusionCharts/FCExporter.swf");

    两个名字必须一样。否则不能保存(waiting 变不成save)。

    五、保存图片效果截图

     1、运行结果

     图2捕获数据处理过程

    图3处理过程完成后

     图4 保存图片选择路径

    图5 保存到桌面的图片


  • 相关阅读:
    vue $refs的用法
    .net 合并GridView中某列相同信息的行(方法1)
    vue 将编号转换成名字显示
    base64转图片的工具网站
    html +css + js 实现自定义模态框
    asp 弹窗效果
    vue 关于$emit的用法
    Git 合并分支
    asp 学习网站
    Tomcat部署方法
  • 原文地址:https://www.cnblogs.com/xiaoqiangzhaitai/p/5637479.html
Copyright © 2011-2022 走看看