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="查询" onclick="SJFXSelectClick()"
style="width: 80px" /> </td>
<td><input type="button" value="报表导出" onclick="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源码，里面封装好的我们可以自行修改属性和方法，这样可以得到我们所想要的效果，比如下载图表图片的初始化名字；比如图表下载后的大小等等。