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

来源：互联网发布：淘宝金酷娃玩具火车编辑：程序博客网时间：2024/06/16 18:13

主要运用到 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.效果图：

0 0