【工作记录0020】Hightcharts 导出图片

主要运用到 Hightcharts 的exporting 配置节，以下示例为导出图片或pdf ：

1.引入以下js文件，作为本地导出图片或pdf 的函数库：

<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

<!-- 需要保存导出功能模块文件，必须在 highcharts.js 之后引入 -->
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>

<!-- 客户端导出功能模块为可选选项，必须在exporting.js 后面引入 -->
<script src="http://cdn.hcharts.cn/highcharts/modules/offline-exporting.js"></script>

2.写入以下配置：

var fileName = '这里是导出文件的名字(无需后缀名)';
$('#id').highcharts({                
                //导出配置
                exporting: {
                    buttons: {
                        contextButton: {
                            menuItems: [{
                                text: '导出PNG',
                                onclick: function () {
                                    this.exportChartLocal({
                                        type: 'application/png',
                                        filename: fileName
                                    });
                                }
                            }, {
                                text: '导出JPEG',
                                onclick: function () {
                                    this.exportChartLocal({
                                        type: 'application/jpeg',
                                        filename: fileName
                                    });
                                }
                            }, {
                                text: '导出PDF',
                                onclick: function () {
                                    this.exportChartLocal({
                                        type: 'application/pdf',
                                        filename: fileName
                                    });
                                }
                            }]
                        }
                    }
                }
});

3.效果图：