Highcharts 實現自定義匯出圖片

旭東怪發表於2020-10-18

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 最終效果圖

 

相關文章