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. PC返回顶部浮动按钮

    要添加的css: <style> .up{width:54px;height:54px;background:url(/Images/topback.gif) no-repeat 0 0; ...

  2. centos7 挂载ntfs移动硬盘

    第一步:下载安装rpmforge ,下载地址 http://pkgs.repoforge.org/rpmforge-release/  安装 rpm -ivh rpmforge-release-0.5 ...

  3. iOS开发——UI篇OC&transform详解

    transframe属性详解 1. transform属性 在OC中,通过transform属性可以修改对象的平移.缩放比例和旋转角度 常用的创建transform结构体方法分两大类 (1) 创建“基 ...

  4. sphinx的简单实例

    sphinx.conf中的配置: source indexLocation { type = mysql sql_host = 192.168.1.113 sql_user = root sql_pa ...

  5. careercup-中等难度 17.11

    17.11 给定rand5(),实现一个方法rand7().也即,给定一个产生0到4(含)随机数的方法,编写一个产生0到6(含)随机数的方法. 解法: 这个函数要正确实现,则返回0到6之间的值,每个值 ...

  6. css Hack,用IE11模拟测试的，条件注释要找真IE去测，模拟的无效

    <!DOCTYPE html> <!--[if lt IE 7 ]> <html class="ie6 ie"> <![endif]--& ...

  7. Socket之UDP分包组包

    一般传输大的文件和信息的时候需要涉及到分包和组包,方法有很多,下面一种是借鉴了别人的思路,供大家参考哈 分包 1.取出需要传输的文件和字符的长度和大小放入缓存区里面: 2.设定固定传输的长度,用需要传 ...

  8. debian配置简单的vsftp服务器

    Ubuntu Linux与Windows系统不同,Ubuntu Linux不会产生无用垃圾文件,但是在升级缓存中,Ubuntu Linux不会自动删除这些文件,今天就来说说这些垃圾文件清理方法.  1 ...

  9. JQuery+EasyUI弹窗代码

    来源:http://www.cnblogs.com/taven/p/3330125.html <head>需要引用的文件: <link href="../JS/EasyUi ...

  10. 考试宝典-真题园安卓AppV2.1.0新版发布啦，全新界面，全新体验，全面适配Android 5.0&6.0系统！

    真题园移动客户端是真题园网 http://www.zhentiyuan.com 旗下的一款学习考试应用App. 1.全新适配Android5.0.6.0系统,重新优化架构网络通信模块. 2.全新清爽U ...