Highcharts自定义按钮导出图表

最近比较忙，公司的项目排得满满的，这个六月都没怎么写博客。最近有一个项目需求中，要求自定义的一个名为 “报表导出” 的按钮，看名字就知道了，点击后会下载导出图表图片。Highcharts有自带的导出功能，但不合此项目的需求。毕竟自带的导出按钮在图表里面，界面我上图大家看看。

百度了半天，也没人能解答。。可能没有人遇到我这样的问题吧，最后只能靠自己分析。去查看了Highcharts中的exporting.js里的源码，最后得出结论。。原来如此简单。。在下面分享项目中的部分简略代码

1.body中自然要定义按钮和Highcharts DIV了

<span style="font-size:14px;">	<!-- 查询栏 -->
	<div>
		<table>
			<tr>
				<br />
			</tr>
			<tr>
				<td style="font-size: 14"> XX时间:</td>
				<td><input id="SJFX_dt" type="text" class="easyui-datetimebox"
				editable='false' style="width: 100px" />
				</td>
				<td>—</td>
				<td><input id="SJFX_dt2" type="text" class="easyui-datetimebox"
				editable='false' style="width: 100px" />  </td>
				<td><input type="button" value="查询" οnclick="SJFXSelectClick()"
					style="width: 80px" /> </td>
				<td><input type="button" value="报表导出" οnclick="SJFXClick();"
					style="width: 100px" />
				</td>

			</tr>
		</table>
	</div>
	<!-- 数据图 -->
	<div id="container" style="min-widht:400px;height:400px"></div></span>

2.接下来就是JS代码了

<span style="font-size:14px;"><script type="text/javascript">
	var chart = null;
	$(function() {

		// 颜色变化
		Highcharts.getOptions().colors = Highcharts.map(
				Highcharts.getOptions().colors, function(color) {
					return {
						radialGradient : {
							cx : 0.5,
							cy : 0.3,
							r : 0.7
						},
						stops : [
								[ 0, color ],
								[
										1,
										Highcharts.Color(color).brighten(-0.3)
												.get('rgb') ] // 变模糊
						]
					};
				});

		// Build the chart
		$('#container')
				.highcharts(
						{
							chart : {
								plotBackgroundColor : null,
								plotBorderWidth : null,
								plotShadow : false
							},
							title : {
								text : ''
							},
							tooltip : {
								pointFormat : '{series.name}: <b>{point.percentage:.1f}%</b>'
							},
							plotOptions : {
								pie : {
									allowPointSelect : true,
									cursor : 'pointer',
									dataLabels : {
										enabled : true,
										format : '<b>{point.name}</b>: {point.percentage:.1f} %',
										style : {
											color : (Highcharts.theme && Highcharts.theme.contrastTextColor)
													|| 'black'
										},
										connectorColor : 'silver'
									}
								}
							},
							series : [ {
								type : 'pie',
								name : '所占百分比',
								data : [ [ 'XXXX', 61.0 ], [ 'XXXX', 29 ],
										[ 'XXXXX', 10 ],

								]
							} ],
							credits : { //去除右下角标示
								enabled : false
							},

						});
	

	});
	
	
	
	
	//导出图表按钮
	function SJFXClick() {
		chart = $('#container').highcharts();<span style="white-space:pre">	</span>//得到上面图表的对象
		chart.exportChart({<span style="white-space:pre">			</span>//就这么一句代码，就可实现自定义按钮下载图表功能
			exportFormat : 'PNG'
		});

	}
	
</script></span>

3.用火狐浏览器导出图片总是在下面，不会弹出对话框让其选择下载存放位置。。用360浏览器（他是基于IE浏览器）点击我们刚做完的下载功能按钮，就能自动跳出一个下载对话框，让其自行决定下载在哪个盘哪个位置。

到此我们就把此功能需求做完了，很简单吧，另外有时间的朋友可以去研究一下Highcharts中的exporting.js源码，里面封装好的我们可以自行修改属性和方法，这样可以得到我们所想要的效果，比如下载图表图片的初始化名字；比如图表下载后的大小等等。