Highcharts导出饼图到PDF脱机无法正常显示

时间:2017-01-13 09:15:55

标签: javascript pdf charts highcharts

我在我的项目中使用Highcharts(localhost),我想将我的图表(饼图和条形图)导出为PDF 离线

作为给定的highcharts image,条形图看起来不错,但饼图显示不正确。我试图导出SVG& PNG,两者都很好,只有PDF让我陷入困境。

有关如何解决此问题的任何想法?以下是示例http://jsfiddle.net/3d406av3/20/

$(function () {
   Highcharts.chart('container', {
            chart: {marginLeft: 400},
        title: {
            text: 'Monthly Chart',
            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'
                    }
                }
        }, 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: [{
                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',
            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('Pie Chart', 120, 320)
            .css({
                color: '#4572A7',
                fontSize: '16px'
            })
            .add();
    });
});

0 个答案:

没有答案