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));