我从6.0.7版本升级到8.0.4版本后，面临着图像切割问题。

Question

我以前使用的是Highchart 6.0.7版本，现在升级到了8.0.4，我使用Phantom js和Highchart Converte JS生成图片。我使用Phantom js和Highchart Converte JS生成图像。以前它是工作后升级新版本面临的图像切割问题。

图像宽度被切割。我同时传递了两个值 Exportorting 和 chart 高度宽度。

Answer 1

当我从Highcharts 7.0.2版本切换到8.0.4版本时，我也遇到了同样的问题。图片的右边被剪掉了。我通过修补 highcharts-convert.js 来解决这个问题，使其总是设置 viewportSize，而不是只调整 PDF 的 viewportSize。

在highcharts-convert.js中，这是原来的代码。

if (outType === 'pdf') {
    // redefine the viewport
    page.viewportSize = { width: clipwidth, height: clipheight };

    // simulate zooming to get the right zoomFactor. Using page.zoomFactor doesn't work anymore, see issue here https://github.com/ariya/phantomjs/issues/12685
    page.evaluate(function (zoom) {
        document.getElementsByTagName('body')[0].style.zoom = zoom;
    }, page.zoomFactor);

    page.paperSize = { width: clipwidth * dpiCorrection, height: clipheight * dpiCorrection };
}

我把代码改成这样

// redefine the viewport
page.viewportSize = { width: clipwidth, height: clipheight };

if (outType === 'pdf') {
    //// redefine the viewport
    //page.viewportSize = { width: clipwidth, height: clipheight};

    // simulate zooming to get the right zoomFactor. Using page.zoomFactor doesn't work anymore, see issue here https://github.com/ariya/phantomjs/issues/12685
    page.evaluate(function (zoom) {
        document.getElementsByTagName('body')[0].style.zoom = zoom;
    }, page.zoomFactor);

    page.paperSize = { width: clipwidth * dpiCorrection, height: clipheight * dpiCorrection };
}

我希望这对其他人来说，也像对我一样有效。