如何添加更多列到這個JS PNG轉換器？ [Highcharts]

Question

我用下面的代碼

http://jsfiddle.net/highcharts/gd7bB/

基本上它正常工作對我的目的，但在我的情況下產生一個長形圖像（在某些情況下，我有一個像300x7000像素的圖像！ ）

在代碼是這樣的功能：

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

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

     svgArr.push(svg); 
    }); 

我試圖找出如何讓這個圖表堆疊並排3米寬度，然後它去到下一個林即

排序的這樣的（其中X是一個曲線圖）：

XXX

XXX

代替：

X

X

X

有沒有人有任何想法如何我可以修改此代碼來做到這一點？我不知道從哪裏開始。提前致謝！

Answer 1

實質上，它只是歸結爲邏輯，並正確地將各個SVG相對於彼此移動。在Highcharts.getSVG代碼的基本路線，爲你指出的是：

svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')" '); 

以下（JSFiddle here）我做的，你如何能做到這粗例子，所有它歸結爲是邏輯和跟蹤寬度（和「列」）的移動到一個新的高度（「行」）前：

Highcharts.getSVG = function(charts) { 
    var svgArr = [], 
     columns = 3, // How many columns you want 
     top = 0, 
     width = 0, 
     currentTopMax = 0; 
     currentWidth = 0, 
     currentColumn = 0, 
     index = 0; 

    $.each(charts, function(i, chart) { 
     var svg = chart.getSVG({chart:{width:chart.chartWidth, height:chart.chartHeight}}); 
     svg = svg.replace('<svg', '<g transform="translate(' + currentWidth + ',' + top + ')" '); 
     svg = svg.replace('</svg>', '</g>'); 

     currentWidth += chart.chartWidth; 

     currentTopMax = Math.max(currentTopMax, chart.chartHeight); 
     width = Math.max(width, currentWidth); 
     index++; 

     if(++currentColumn % columns == 0) { 
      top += currentTopMax; 
      currentTopMax = 0; 
      currentWidth = 0; 
     } 

     svgArr.push(svg); 
    }); 

    if(index % columns != 0) 
     top += currentTopMax; 

    return '<svg height="'+ top +'" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>'; 
}; 

另外請注意，您的原代碼必須與chart.getSVG一個問題讓不正確的寬度爲每個圖表，留下一些空白。原來的路線是：

var svg = chart.getSVG(); 

其中已替換爲：

var svg = chart.getSVG({chart:{width:chart.chartWidth, height:chart.chartHeight}}); 

感謝霍埃爾·斯特蘭斯基爲finding that fix。