FusionChart 导出图片 功能实现（转载）

http://www.cnblogs.com/jiagoushi/archive/2013/02/05/2893468.html

题目：精美FusionChart
插件 导出成图片功能实现 绝对实用

原文：

在我们日常的开发中，导出图片可以说是很必须的事情，我们可以采用各种handler来处理，但是今天我们不说别的，就说说FusionChart插件作为flash显示图表，如何导出成图片吧。这个功能说简单，其实非常简单，就是添加几个属性，但是要说复杂，那可是也挺恶心，我就把这些导出图片的各种参数都测试了一遍，也找到了一个经典的问题，如果不测试几次，还真不容易发现问题所在。好了，我们一起来学习一下应该如何导出图片呢。

FusionChart插件的使用，我就不叙述了，在我的昨天的博客中fusionChart 图表插件 我们要显示漂亮的图表 就来看看 我进行了简单的介绍，今天介绍导出图片的功能，基本上我们对于图表也就会使用到这两点。

我们采用Xml作为数据源来显示图表，采用最简单的一个图表--2D柱状图。为了保证学习的完整性，我把前台代码贴出来。

 1 @{

 2     Layout = null;

 3 }

 4 <!DOCTYPE html>

 5 <html>

 6 <head>

 7     <title>Index</title>

 8     <script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-1.5.1.js"></script>

 9     <script type="text/javascript" src="http://www.cnblogs.com/FusionCharts/FusionCharts.js"></script>

10     <script type="text/javascript">

11         $(function () {

12             var chart = new FusionCharts("http://www.cnblogs.com/FusionCharts/Column2D.swf", "chart1", "800", "600", "0");

13             chart.setXMLUrl("http://www.cnblogs.com/data/data.xml");

14             chart.render("divChart");

15

16             //            chart.setJSONUrl("@Url.Action("json", "home")");

17             //            chart.render("divChart");

18         });

19

20

21     </script>

22 </head>

23 <body>

24     <div id="divChart">

25     </div>

26 </body>

27 </html>

下面我们主要的工作就是来为data.xml文件添加内容。请注意：有一点需要注意的地方，fusionChart有两种导出图片的方式，一种是通过服务器来导出图片，另一种就是在客户端，但是我通过测试发现，在客户端导出图片不适合我们的项目，因为它会需要我们添加一个保存按钮，这是最可气的地方，所以我只介绍服务器端导出图片的方法。导出图片会加重服务器的负担，我在我的4核处理器，4G内存的电脑上测试导出图片发现，会使cpu的使用率上升不少，所以我们尽量让用户少导出图片，能免则免。

data.xml文件中的内容是主角，所以我会把其中涉及到的导出图片的几个参数拿出来单独说一下。

 1 <?xml version="1.0" encoding="utf-8" ?>

 2 <chart caption="中国万岁"  xAxisName="国家" yAxisName="收入" exportEnabled="1" exportAction="download"

 3        exportAtClient="0" exportShowMenuItem="1" exportHandler="../fusionCharts/FCExporter.aspx"

 4        showExportDialog='1' exportDialogMessage='图片生成中，请稍候' exportDialogColor='ff0000'

 5        exportCallback='FC_Exported' exportFormats='PDF=Export as PDF|PNG=Export as PNG|jpg=导出成jpg格式的图片' >

 6   <set label="中国" value="130000"/>

 7   <set label="美国" value="20000"/>

 8   <set label="法国" value="12000"/>

 9   <set label="俄罗斯" value="1400"></set>

10 </chart>

我来逐个把里面重要的参数说明一下：

  1. exportEnabled 是否可以导出图片 如果为0，则不能导出图片或pdf
  2. exportAction 导出操作。这个有两个取值，一个是download，表示下载到客户端，另一个是save，表示会存储到服务器对应目录下
  3. exportAtClient 表示是否是进行客户端导出。因为我不提倡客户端导出，所以设置为0
  4. exportShowMenuItem 表示是否显示右键 菜单 显示导出的操作
  5. exportHandler 这是真正导出图片的文件，他会生成图片导出
  6. showExportDialog 表示的是是否显示导出的动态比例 显示框
  7. exportDialogMessage 表示导出框的显示文本，默认为capture ..我们可以更改
  8. exportDialogColor 导出框的颜色值
  9. exportCallBack  这个主要是用来设置当exportAction 为save 即保存到服务器时的回调函数，这是定义在客户端的js函数
  10. exportFormats  导出的文本显示，fusionChart 一共可以导出的格式为jpg,png,pdf,我们可以设置要显示的文本

其他的参数基本上都和导出操作关系不大，我就不细说了。我们先把导出的图片保存到服务器的指定目录。那么我们就要设置exportAction为save，这个会有个回调函数，告知客户端是否操作成功。就是exportCallBack定义的js函数。

要达到这个目的，我们需要修改exportHandler中的文件 中的图片的存储地址。我们选择的是项目中的images目录下

 1  /// directory where the FCExporter.aspx file recides

 2     private const string SAVE_PATH = "../images/";

 3

 4     /// <summary>

 5     /// IMPORTANT: This constant HTTP_URI stores the HTTP reference to

 6     /// the folder where exported charts will be saved.

 7     /// Please enter the HTTP representation of that folder

 8     /// in this constant e.g., http://www.yourdomain.com/images/

 9     /// </summary>

10     private const string HTTP_URI = "../images/";

下面是修改后，添加了回调函数的前台代码

 1 @{

 2     Layout = null;

 3 }

 4 <!DOCTYPE html>

 5 <html>

 6 <head>

 7     <title>Index</title>

 8     <script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-1.5.1.js"></script>

 9     <script type="text/javascript" src="http://www.cnblogs.com/FusionCharts/FusionCharts.js"></script>

10     <script type="text/javascript">

11         $(function () {

12             var chart = new FusionCharts("http://www.cnblogs.com/FusionCharts/Column2D.swf", "chart1", "800", "600", "0");

13             chart.setXMLUrl("http://www.cnblogs.com/data/data.xml");

14             chart.render("divChart");

15

16             //            chart.setJSONUrl("@Url.Action("json", "home")");

17             //            chart.render("divChart");

18         });

19         function FC_Exported(objRtn) {

20             if (objRtn.statusCode == "1") {

21                 alert("保存成功");

22             }

23             else {

24                 alert("There was an error saving the chart. Error message: " + objRtn.statusMessage + ". Its DOM Id is " + objRtn.DOMId);

25             }

26         }

27

28

29     </script>

30 </head>

31 <body>

32     <div id="divChart">

33     </div>

34 </body>

35 </html>

记得我们的操作是把导出的图片保存到服务器项目的images目录下，并且回调函数告诉客户端是否成功。

下面我们一起来看结果。

第一幅图是表示导出操作正在进行，也就是导出框显示出来。

第二幅图表示客户端回调函数执行，保存成功

对于下载到客户端的操作，就是将exportAction更改为download就可以，大家可以测试一下。下面我来说一个我找了很长时间才发现的问题。

就是关于客户端回调函数执行，我们把客户端js函数写好，xml文件中也定义了回调函数的名称，但是我测试就是回调函数不执行。经过我长时间的修改分析，终于发现问题所在。

1  var chart = new FusionCharts("http://www.cnblogs.com/FusionCharts/Column2D.swf", "chart1", "800", "600", "0");

如果我们有写第六个参数，我们记得如果回调函数没有执行的话，将他设置为1，基本上就可以。但是我用我win 7 + ie 10 测试。设置为0 也是可以正常回调的，所以和浏览器可能会有关系。

还有一个我们要注意的问题就是：如果我们用ie调试的话，一定记得打开开发者工具，把始终从服务器刷新选上，让浏览器始终从服务器获取。否则的话，可能因为浏览器缓存的原因，更改了参数数据，图表不一定实时更新。

好了，今天就到这里，后天就要回家了，今天公司发了1000块钱的过节费，不是奖金奥，只是过节费，还不错啦。可以买点好吃的了。

提前祝大家 春节快乐，阖家幸福

很好的引导文章  还有看不太明白的  可以问我




FusionChart 导出图片 功能实现（转载）的更多相关文章

  1. 任意flex控件导出图片

    任意flex控件导出图片   flex导出图片功能通常是: 思路1:客户端将UIComponent转化为BitmapData,再转为ByteArray,将ByteArray上传到服务端,服务端发送文件 ...

  2. PIE SDK导出图片

    1. 功能简介 导出图片功能可以将制图模板以及视图.绘制元素.制图元素等保存为图片.本示例程序实现了专题制图下导出图片功能. 2. 功能实现说明 2.1导出图片 2.2 实现思路及原理说明 调用IPa ...

  3. Excel催化剂开源第45波-按原图大小导出图片

    从Excel中导出图片,是一个很常规的需求,也有一些久旧不衰的界面操作法小技巧从OpenXml文件中批量导出,在VBA开发中,也会使用Chart对象的背景图的技巧来导出.总体来说,和真正想要的效果还是 ...

  4. Atitit.导出excel功能的设计 与解决方案

    Atitit.导出excel功能的设计 与解决方案 1.1. 项目起源于背景1 1.2. Js  jquery方案(推荐)jquery.table2excel1 1.3. 服务器方案2 1.4. 详细 ...

  5. C#向PPT文档插入图片以及导出图片

    PowerPoint演示文稿是我们日常工作中常用的办公软件之一,而图片则是PowerPoint文档的重要组成部分,那么如何向幻灯片插入图片以及导出图片呢?本文我将给大家分享如何使用一个免费版Power ...

  6. .net 下新版highcharts本地导出图片bug处理

    最近公司要用到highcharts这个插件来生成图表,所以我花了点时间研究了下. 现在最新的版本是3.0.2,这js插件居多优点就不比多说了,demo官网上也很详细.但是优点不爽的地方是,导出图片这个 ...

  7. Asp.net通过模板(.dot/Html)导出Word，同时导出图片

    一.Office组件导出Word(服务器配置麻烦) 需要引用Office的DLL,在下文的附件中,不同的Offic版本用的不一样,虽然高级版本可以兼容低级的,不过,还是统一版本最好 贴上核心代码(转载 ...

  8. FusionCharts V3图表导出图片和PDF属性说明（转）

    百闻不如一见,狠狠点击,快快下载:(演示文档有错误,不提供下载了.待新的演示文档出来.) 许多朋友说上面的DEMO用不了.fusioncharts官方的演示非常不错,就是来不及整理,各位大侠们可以研究 ...

  9. Highcharts 本地导出图片和PDF asp.net mvc版

    啰嗦: 现在大家利用Highcharts开发时,有时候会遇到导出的功能问题,但是highcharts默认是链接自己的服务器上进行处理,但是有时候我们会连不上他的服务器,所以我们要让他在我们的服务器上进 ...

随机推荐

  1. SQL2008-截取字段函数

    ltrim()  int转字符 Left('ABC',2)='AB' right('ABC',2)='BC' SUBSTRING('ABC',1,2)='AB'  和DELPHI中的COPY一样Sub ...

  2. Property cannot be found on forward class object?

    I have a UIView and I'm trying to set its layer properties. self.colorSwatch = [[UIView alloc] initW ...

  3. [Objective-c 基础 - 2.5] .h和.m文件，点语法，成员变量作用域

    A. 命令行编译和XCode编译 1.在存在多个.m源码实现文件的情况下,若根据需要引入.m文件,使用命令行仅仅编译主.m文件即可,但是XCode会同时编译全部.m文件,会发生编译错误(重复定义全局变 ...

  4. iOS面试知识集锦

    最近在面试iOS应聘者过程中,发现很多面试者基础都比较薄弱,但是项目经验都写的很多,问几个问题基本上就可以了解大概的情况了,今天看到cocoachina上这篇面试题不错,分享给大家~~~ OC的理解与 ...

  5. Oracle- 表的管理

    一.表名和列的命名规则 1.必须以字母开头. 2.长度不能超过30字符. 3.不能使用Oracle的保留字. 4.只能使用如下字符 A-Z,a-z,0-9,$,#等. 二.Oracle支持的数据类型 ...

  6. Android中的动画学习总结

    android中动画可分为三种:帧动画,补间动画,和属性动画.其中属性动画是google推荐的,它可以实现前面两种动画的效果,运用起来更加灵活. 帧动画:顾名思义,就是一帧一帧的图片,快速播放形成的动 ...

  7. mac下8080端口到80端口的转发

    MAC OS 本质上还是 Unix 系统, Unix 系统大多默认情况下非root用户是无法使用小于1024的常用端口的.这时候如果你开发中需要在普通用户下用到80端口, 比如 tomcat, 比如 ...

  8. 【转】使用junit进行单元测试（初级篇）

    转自:http://blog.csdn.net/andycpp/article/details/1327147 我们在编写大型程序的时候,需要写成千上万个方法或函数,这些函数的功能可能很强大,但我们在 ...

  9. Aizu 2450 Do use segment tree 树链剖分+线段树

    Do use segment tree Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.bnuoj.com/v3/problem_show ...

  10. 教你如何选择Android游戏引擎

    我们进行Android游戏开发时选择游戏引擎是必须的,但是该如何选择呢?哪个Android游戏引擎更加适合自己呢?本文就提供了三个游戏引擎的对比说明,阐述了它们各自的特点,为大家选择引擎提供了参照. ...