精美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>
我来逐个把里面重要的参数说明一下：
- exportEnabled 是否可以导出图片 如果为0，则不能导出图片或pdf
- exportAction 导出操作。这个有两个取值，一个是download，表示下载到客户端，另一个是save，表示会存储到服务器对应目录下
- exportAtClient 表示是否是进行客户端导出。因为我不提倡客户端导出，所以设置为0
- exportShowMenuItem 表示是否显示右键 菜单 显示导出的操作
- exportHandler 这是真正导出图片的文件，他会生成图片导出
- showExportDialog 表示的是是否显示导出的动态比例 显示框
- exportDialogMessage 表示导出框的显示文本，默认为capture ..我们可以更改
- exportDialogColor 导出框的颜色值
- exportCallBack 这个主要是用来设置当exportAction 为save 即保存到服务器时的回调函数，这是定义在客户端的js函数
- 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块钱的过节费，不是奖金奥，只是过节费，还不错啦。可以买点好吃的了。
提前祝大家 春节快乐，阖家幸福
