Question

我想创建一个名为＆＃39;导出为PDF＆＃39;的外部按钮。在highcharts之外并隐藏默认按钮＆＃34; Export＆＃34; ＆安培; ＆＃34;打印和＃34;在高图出口选项中。

我正在将localhost用于我的项目，并且必须将highcharts导出为离线PDF。我在下面的jsfiddle创建了一个例子。

$(function () {
    window.chart = new Highcharts.Chart('container', {
            chart: {marginLeft: 400},
        title: {
            text: 'Report',
                        x: 50,
            y: 130,
            margin: 150
        }, plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        formatter: function() {
                            var val = this.y;
                            if (val < 1) {
                                return '';
                            }
                            return val;
                        },
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                    }
                }
        }, exporting:{
                enabled: false,
        }, xAxis: {
            categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30']
        },
        labels: {
            items: [{
                //html: 'Total fruit consumption',
                style: {
                    left: '50px',
                    top: '18px',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
            }]
        },
        series: [{
            type: 'column',
            name: 'Jane',
            data: [3, 2, 1, 3, 4, 3, 2, 1, 3, 4, 3, 2, 1, 3, 4, 3, 2, 1, 3, 4, 3, 2, 1, 3, 4, 3, 2, 1, 3, 4]
        }, {
            type: 'column',
            name: 'John',
            data: [2, 3, 5, 7, 6, 2, 3, 5, 7, 6, 2, 3, 5, 7, 6, 2, 3, 5, 7, 6, 2, 3, 5, 7, 6, 2, 3, 5, 7, 6], 
            center: [0, 100],
        }, {
            type: 'pie',
            name: 'Total Visit',
            data: [{
                name: 'Jane',
                y: 13,
                color: Highcharts.getOptions().colors[0] // Jane's color
            }, {
                name: 'John',
                y: 23,
                color: Highcharts.getOptions().colors[1] // John's color
            }],
            center: [-250, 250],
            size: 150,
            showInLegend: false,
            dataLabels: {
                enabled: true
            }
        }]
    }, function (chart) {
        chart.renderer.text('Total Visit', 120, 320)
            .css({
                color: '#4572A7',
                fontSize: '16px'
            })
            .add();

    });
    $('#export_PDF').click(function () {
      chart.exportChart({
        type: 'application/pdf',
        sourceWidth: 1700,
        sourceHeight: 600,
      });
    });
});

我是否可以通过点击我创建的外部按钮了解如何将highcharts导出为PDF离线？

Answer 1

如果您需要让pdf导出脱机工作，则需要在服务器端设置highcharts渲染。

Render charts on the server

Answer 2

只需使用此按钮编辑按钮的代码，

$('#export_PDF').click(function () {
  chart.exportChartLocal({
    type: 'application/pdf',
    sourceWidth: 1700,
    sourceHeight: 600,
  });
});

Highcharts通过单击外部按钮离线导出PDF

2 个答案: