Highcharts 导出多个饼图

Question

目前我有导出 2 个图表的示例： http://jsfiddle.net/highcharts/gd7bB/1/

这是我的版本 - 但我不知道如何包装 var Chart1 = new Highcharts.Chart({}); 以便可以触发 SVG 函数...

$(document).ready(function () {

    var url = window.location.href;
    url = url.split("/");
    url.pop();
    url = url.join("/");

    var link = url;

    /**
     * Create a global getSVG method that takes
     * an array of charts as an argument
     */
    Highcharts.getSVG = function(charts) {
        var svgArr = [],
        top = 0,
        width = 0;

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

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

            svgArr.push(svg);
        });

        return '<svg height="'+ (top + 100) +'" width="' + width 
                   + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' 
                   + svgArr.join('')
                   + '<text class="highcharts-title"
                        text-anchor="middle" y="'+ (top + 20) +'" x="225">
                        <tspan x="225">this is the disclaimer</tspan>
                      </text></svg>';
    };

    /**
     * Create a global exportCharts method that
     * takes an array of charts as an argument,
     * and exporting options as the second argument
     */
    Highcharts.exportCharts = function(charts, options) {
        var form
        svg = Highcharts.getSVG(charts);

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

        // create the form
        form = Highcharts.createElement('form', {
            method: 'post',
            action: options.url
        }, {
            display: 'none'
        }, document.body);

        // add the values
        Highcharts.each(['filename', 'type', 'width', 'svg'], function(name) {
            Highcharts.createElement('input', {
                type: 'hidden',
                name: name,
                value: {
                    filename: options.filename || 'chart',
                    type: options.type,
                    width: options.width,
                    svg: svg
                }[name]
            }, null, form);
        });
        console.log(svg); //return;
        // submit
        form.submit();

        // clean up
        form.parentNode.removeChild(form);
    };

    $('#export').click(function() {
            Highcharts.exportCharts([chart[1], chart[2]]);

        });


    // Define a default set of chart options
        var defaultChart = {
            chart: {
                renderTo: 'chart'
            },
            title: {
                text: 'Chart'
            },
            plotArea: {
                shadow: null,
                borderWidth: null,
                backgroundColor: null
            },
            tooltip: {
                formatter: function() {
                    return '<b>' + this.point.name + '</b>: '
                                 + this.y.toFixed(2) + ' % / £' + this.point.mv;
                }
            },
            exporting: {
                enabled:false
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    showInLegend: true,
                    dataLabels: {
                        enabled: true,
                        formatter: function() {
                            if( this.point.name != undefined)
                                return '' + this.y.toFixed(2) + '%';
                            else
                                return false;
                        }
                    }
                }
            },
            credits: {
                enabled: false,
                text: 'Newton.co.uk'
            },
            legend: {
            verticalAlign: 'bottom',
                x: 100,
                y: 0,
                width: '100%',
                itemWidth: '100%',
                floating: false,
                labelFormatter: function() {
                    return this.name + ': ' + this.y.toFixed(2) + ' %';
                },
                borderWidth: 0,
                margin: 0,
                lineHeight: 50
            },
            series: []
        };


        // Create a function that will fetch the data 
        // and create the chart based on passed options
        function makeChart( url, chart, options ) {
            $.getJSON(link + url, null, function(items) {
                var valuations = items.valuations;
                var series = {
                    type: 'pie',
                    name: '',
                    data: []
                };
                $.each(valuations, function(itemNo, item) {
                    series.data.push({
                        name: item.id,
                        y: parseFloat(item.percentageMarketValue),
                        mv: item.marketValue
                    })
                });

                options.series.push(series);
                chart = new Highcharts.Chart(options);
                //chart.render();
            });
        }

        var chartlist = new Array('','Industry','Geographic');
        var chart = new Array();
        chart[1];
        chart[2];


        for (i=1; i<3; i++) {
        console.log(chart[i]);
            //Set up chart1's custom options
        chart[i] = {
            chart: {
                renderTo: 'container' + i
            },
            title: {
                text: chartlist[i]
            }
        }
        // Call our new function to make the chart
        makeChart("/valuations/" + chartlist[i].toLowerCase() + ".json",
                  chart[i], $.extend(true, {}, defaultChart, chart[i]) );

        }



        /*
        //Set up chart1's custom options
        var chart1 = {
            chart: {
                renderTo: 'container1'
            },
            title: {
                text: 'Industry'
            }
        }
        // Call our new function to make the chart
        makeChart("/valuations/industry.json",
                  chart1, $.extend(true, {}, defaultChart, chart1) );

        // Setup chart2's custom options
        var chart2 = {
            chart: {
                renderTo: 'container2'

            },
            title: {
                text: 'Geographic'
            }

        }
        // Call our new function to make the chart
        makeChart("/valuations/geographic.json",
                  chart2, $.extend(true, {}, defaultChart, chart2) );
        */

        Highcharts.setOptions({
            colors: ['#9E8F6C', '#7BA1CD', '#666666', '#A2B021',
                     '#DC7000', '#336666', '#FF9655', '#999999']
        });
});

Answer 1

尝试从： chart = new Highcharts.Chart(options); 更改为 chart.push(new Highcharts.Chart(options));