Highcharts 实现自定义导出图片

朱雀 2023-10-05 11:55 160阅读 0赞

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

<html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <script src="../jquery-3.2.1.js"></script>
      <script src="../highcharts/highcharts.js"></script>
      <script src="../highcharts/exporting.js"></script>
      <title>Document</title>
    </head>
    
    <body>
        <button type="button" class="button">导出</button>
      <div >
        <div id="chart"  style="width:800px;height:350px;"></div>
      </div>
    </body>
    
    </html>
    <script>
        var chart = Highcharts.chart('chart', {
            title: {
                text: ''
            },
            credits: { // 隐藏版权
                enabled: false
            },
            exporting:{
                enabled: false
            },
            xAxis: [{
                tickWidth: 0,
                lineColor: 'rgba(94, 168, 242, 0.1)',
                crosshair: {
                    color: 'white',
                    width: 1,
                    dashStyle: 'Dash',
                snap: true
                },
                title: {
                    text: '(月份)',
                    align: 'high',
                    x: 10,
                    y: -20,
                },
                categories: ['1', '2', '3', '4', '5', '6'],
            }],
            yAxis: [{
                tickWidth: 0,
                gridLineColor: 'rgba(94, 168, 242, 0.1)',
                gridLineWidth: 1,
                title: {
                    text: null
                },
                min: 0
            }],
            series: [{
                name: '公司一',
                color: '#1492ff',
                data: [88, 81, 112, 89, 118, 62]
            }, {
                name: '公司二',
                color: '#c42929',
                data: [59, 61, 100, 95, 138, 81]
            }, {
                name: '公司三',
                color: '#2ac43b',
                data: [129, 59, 89, 118, 182, 181]
            }],
        });
        $('.button').click(function () {
                chart.exportChart({
                filename: '警情统计'
            }, {
                chart: {
                    backgroundColor: '#FFFFFF'
                }
            });
        });
    </script>

#### 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/2020101821491242.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70