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. A Tour of Go Concurrency

    The next section covers Go's concurrency primitives. A Tour of Go Goroutines A goroutine is a lightw ...

  2. configparser

    configparser configparser模块是python中用来处理类似于windows的ini格式文件, 一个ini文件的格式 [section] key = value

  3. python会什么比c慢

    众所周知,python执行速度比c慢.原因为何? 先来看下面这张图: python的传统运行执行模式:录入的源代码转换为字节码,之后字节码在python虚拟机中运行.代码自动被编译,之后再解释成机器码 ...

  4. Nape的回调系统 nape.callbacks

    在Nape中增加一个回调大致分为三步 1:定义一些标签,并根据需求为不同的Interactor打上不同的标签 2:定义一个监听器,这个监听器定义了哪些标签触发了哪种行为之后做何种回调 3:为Space ...

  5. 连载：面向对象葵花宝典：思想、技巧与实践（32） - LSP原则

    LSP是唯一一个以人名命名的设计原则,并且作者还是一个"女博士"  ======================================================== ...

  6. ThinkPHP3.1快速入门（13）自动完成

    自动完成是ThinkPHP提供用来完成数据自动处理和过滤的方法,使用create方法创建数据对象的时候会自动完成数据处理.因此,在ThinkPHP使用create方法来创建数据对象是更加安全的方式,而 ...

  7. Codeforces Round #321 (Div. 2) E. Kefa and Watch 线段树hash

    E. Kefa and Watch Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/580/prob ...

  8. Rational Rose--简介

    Rational Rose Rational Rose是Rational公司出品的一种面向对象的统一建模语言的可视化建模工具.用于可视化建模和公司级水平软件应用的组件构造. 目前版本的Rational ...

  9. HDU 5071 Chat(2014鞍山B，模拟)

    http://acm.hdu.edu.cn/showproblem.php?pid=5071 Chat Time Limit: 2000/1000 MS (Java/Others)    Memory ...

  10. [AngularJS] Catching errors with $exceptionHandler

    The AngularJS $exceptionHandler service allows you to catch and handle unanticipated JavaScript erro ...