Question

我使用以下代码

基本上它适用于我的目的，但它在我的情况下产生一个长图像（在某些情况下我有一个像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

有人知道如何修改此代码来执行此操作吗？我不知道从哪里开始。提前谢谢！

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。

如何在这个JS PNG转换器中添加更多列？ [Highcharts]

1 个答案: