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. Android实例-闪光灯的控制(XE8+小米2)

    unit Unit1; interface uses System.SysUtils, System.Types, System.UITypes, System.Classes, System.Var ...

  2. python 错误、调试和测试

    在程序运行过程中,总会遇到各种各样的错误. 有的错误是程序编写有问题造成的,比如本来应该输出整数结果输出了字符串,这种错误我们通常称之为bug,bug是必须修复的. 有的错误是用户输入造成的,比如让用 ...

  3. Java数组的内存管理

    Java数组的内存管理 Java语言是典型的静态语言,因此Java的数组是静态的,即当数组被初始化之后,该数组的长度是不可变的.Java程序中的数组必须经初始化才能使用.所谓初始化,就是当数组对象的元 ...

  4. SCALA编程实例

    SCALA与JAVA很相似,包括类.函数.集合等等的使用.如果你是一个JAVA程序员,你应该会很快上手. 需要注意的是SCALA特有的一些奇葩标志,比如->,比如=>,遇到要注意下. 使用 ...

  5. iOS开发中的测试框架 （转载）

      作者:CrespoXiao授权 地址:http://www.jianshu.com/p/7e3f197504c1 我们为什么要用测试框架呢?当然对项目开发有帮助了,但是业内现状是经常赶进度,所以T ...

  6. android图片的压缩和水印

    学习了一下压缩和水印,以后要用到的时候可以直接来这里拷贝 activity_main.xml <LinearLayout xmlns:android="http://schemas.a ...

  7. HBase 使用场景和成功案例

    有时候了解软件产品的最好方法是看看它是怎么用的.它可以解决什么问题和这些解决方案如何适用于大型应用架构,能够告诉你很多.因为HBase有许多公开的产品部署,我们正好可以这么做.本章节将详细介绍一些人们 ...

  8. cocos2d-x NotificationCenter

    转自:http://www.xinze.me/cocos2d-x-ccnotificationcenter/ 在前端开发中,JS和as3中都有很好的监听机制, 我们使用Event的addEventLi ...

  9. UITableView实现格瓦拉飞天投票模块

    格瓦拉目前来说动画效果确实做的还比较好,虽然不是说很炫但做到精致,这次就模仿了它投票的模块.其实想到要实现它还是有很多方法,不过这次我还是采用了苹果自带控件UITableView简简单单来实现它,再次 ...

  10. [Effective C++ --006]若不能使用编译器自动生成的函数，就该明确拒绝

    ■本文内容■□第一节 <引言> 在条款五的讲解中,我们已经知道编译器是聪明的家伙,它会帮助你生成类的构造函数.析构函数.一个copy构造函数和一个赋值运算符.有时真的要感谢编译器所做的这一 ...