Highcharts导出PDF - 用于动态插入系列

时间:2016-04-08 09:59:59

标签: javascript jquery pdf highcharts

我已经为highcharts动态插入了系列,我一直试图将图表导出为PDF,如下所示。

小提琴示例: http://jsfiddle.net/jq0zbffb/

更新的代码:

// getMyChart() starts 

function getMyChart() {
    var myChart;
    Highcharts.setOptions({
                    lang: {
                        thousandsSep: ',',
                         numericSymbols: ['M']
                    }
                });

    var options = {
        chart : {
            renderTo : 'container',
            type : 'area'
            },

        xAxis : {
            lineWidth: 0,
            categories : []
        },

        yAxis : [ {
                    title : {
                        text : 'Averages',
                    },

                    lineWidth: 0,
                    } ,
                    {
                    title : {
                        text : 'Values',
                    },

                    opposite: true,
                    lineWidth: 0,

                }],
         series : []
  };

        // jQuery 

        $.get(url, function(xml) {
            var $xml = $(xml);
            $xml.find('categories Date').each(
                        function(i, category) {
                            options.xAxis.categories.push($(category).text());
                        });


            $xml.find('type Series').each(
                        function(i, series) {
                            var seriesOptions = {
                                name : $(series).find('name').text(),
                                data : []

                                };
                                $(series).find('data point').each(
                                    function(i, point) {
                                        seriesOptions.data.push(parseInt($(point).text()));
                                        });
                                options.series.push(seriesOptions);
                            });

            myChart = new Highcharts.Chart(options);
            });
    //jquery ends

    //  .getSVG function 

       Highcharts.getSVG = function(charts) {

            var svgArr = [],
            top = 0,
            width = 0;

        $.each(charts, function(i, chart) {
            var svg = chart.getSVG();
            svg = svg.replace('<svg', '<svg transform="translate(0,' + top + ')" ');
            svg = svg.replace('</svg>', '</svg>');

            top += chart.chartHeight;
            width = Math.max(width, chart.chartWidth);

            svgArr.push(svg);
        });

        console.log(svgArr);
        return '<svg height="'+ top +'" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
    };
    Highcharts.exportCharts = function(charts, options) {

        options = Highcharts.merge(Highcharts.getOptions().exporting, options);

        Highcharts.post(options.url, {
            filename: options.filename || 'Pulse_Chart',
            type: options.type,
            width: options.width,
            svg: Highcharts.getSVG(charts)
        });
    };

    $('#export').click(function() {
        Highcharts.exportCharts([myChart], {type: 'application/pdf'});
    });

    } // getMyCharts ends

HTML:

<div id="container" class="myChart" style="width: 100%; height: 500px; margin: 0 auto"></div>
    <button id="export">Export all</button>

问题:

SCRIPT5009: 'chart' is undefined 

我使用jQuery动态插入系列。

是否有可能导出这样的图表?任何人都可以指出我哪里出错了? 感谢您的时间和帮助。

0 个答案:

没有答案