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. Java深度遍历文件夹(递归实现)

    package FileDemo; import java.io.File; public class DeepSearchDir { /** * @param args */ public stat ...

  2. pom.xml报错

    错误太多打开文件后就不会显示,点开前边的选项卡就会提示错误信息,一般是jar包没加载全.

  3. 委托、匿名函数、Lambda表达式和事件的学习

    委托: 还记得C++里的函数指针么?大家可以点击这里查看一下以前的笔记.C#的委托和C++中的函数指针效果一致. 当我们需要将函数作为对象进行传递和使用时就需要用到委托. 下面我们看一个例子: usi ...

  4. 4G通信技术LTE介绍

    参考文档在这里 LTE技术 LTE是继GSM/EDGE和UMTS/HSxPA之后的由3GPP推出的移动网络技术最新标准,属于4G. 未来网络需要更高的数据速率,和包路由优化系统.更好的QoA和更廉价的 ...

  5. PowerDesigner 业务处理模型( BPM )

    PowerDesigner 业务处理模型( BPM ) 说明 properties语言文档xmlvalidation数据库   目录(?)[+]   一.     BPM 简介 业务处理模型(Busi ...

  6. 关于 JavaScript 数据类型判断

    在 JavaScript 中,有 undefined.null.number.string.boolean 五种基本数据类型,另外,有一种复杂数据类型 object ,类似于 C# 中值类型.引用类型 ...

  7. nginx+tomcat动静分离的核心配置

    #所有jsp的页面均交由tomcat或resin处理 location ~ .(jsp|jspx|do)?$ { proxy_set_header Host $host; proxy_set_head ...

  8. Win7家庭普通版、家庭高级版、专业版、旗舰版版本差别

    刚才我们发了一个大图片:<Windows7.Vista.XP 三大系统功能差异比较一览图>,现在,再发一张对比图片,简要的看看Windows7家庭普通版.家庭高级版.专业版.旗舰版这四个版 ...

  9. java_jdbc_3层 解耦

    Dao - 提供接口 DaoImpl - 实现 DaoFactory - 工厂模式获取实现 DaoExcetpion - jdbc异常处理 实现runtime exception类即可 TestDem ...

  10. 建索引让SQL飞起来

    今天帮助看了一个哥们的数据库,帮他抓了一下等待事件,刚好有一个sql在等待事件中,顺便看看 监控等待事件 select a.SID, a.EVENT, b.OSUSER, b.username, b. ...