时间戳

首页 > 解决方案 > 将 Highchart 版本从 6.0.7 升级到 8.0.4 后，我面临图像剪切问题

highcharts - 将 Highchart 版本从 6.0.7 升级到 8.0.4 后，我面临图像剪切问题

问题描述

我使用的是 Highchart 6.0.7 版本并将其更新到 8.0.4。我正在使用带有 Highchart Converte JS 的 phantom js 生成图像。以前它在升级面临图像切割问题的新版本后工作。

图像宽度正在切割。我同时传递了值Exportorting和chart高度宽度。

标签： highchartsphantomjs

解决方案

当我从 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 };
}

我希望这对其他人和我一样适用。

推荐阅读