Highcharts exporting属性实现图表导出为图片、PDF

我就是我 2023-10-06 12:46 2阅读 0赞

#### 1 实现代码 ####

<html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8">
            <script type="text/javascript" src="js/jquery.min.js"></script>
            <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
            <script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
            <script type="text/javascript">
                $(function () {
                    var chart; 
                    $(document).ready(function() {
                        chart = new Highcharts.Chart({
                            chart: {
                                renderTo: 'container',
                                type: 'spline',
                            },
                            credits : {
                                enabled:false//不显示highCharts版权信息
                            },
                            exporting: {
                                buttons:{	//配置按钮选项
                                    exportButton:{	//配置导出按钮
                                        width:50,
                                        symbolSize:20,
                                        borderWidth:2,
                                        borderRadius:0,
                                        hoverBorderColor:'red',
                                        height:30,
                                        symbolX:25,
                                        symbolY:15,
                                        x:-150,
                                        y:20
                                    },
                                },
                                filename:'Chart title',//导出的文件名
                                type:'image/png',//导出的文件类型
                                width:800	//导出的文件宽度
                            },
                            xAxis: {
                                categories: ['2011-11','2011-12','2012-01','2012-02','2012-03']
                            },	  
                            series: [{
                                name: 'series1',
                                data: [2,4,5,9,2]
                            },{
                                name:'series2',
                                data:[3,5,7,2,1]
                            }]
                        });
                        $(".highcharts-button").each(function () {
                            $(this).hide();
                        });
                        $(".highcharts-contextbutton").each(function () {
                            $(this).show();
                        });
                    });
                });
            </script>
        </head>
        <body>
            <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
        </body>
    </html>

#### 2 效果图 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200710102118688.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70