javascript - 如何向此 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 是一个图形):

X X X

X X X

代替:

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

感谢 Joel Stransky finding that fix .