javascript - wkhtmltoimage 不显示 highcharts 图形的网格线

Question

我正在使用 symfony 生成一个 simple highcharts graph ，但是 wkhtmltoimage 没有正确显示网格线:

我的 knp_snappy.image 配置如下:

options:
        encoding:           UTF-8
        format:             svg
        width:              0
        enable-smart-width: true
        zoom:               3

并且我在图表中添加了以下选项:

plotOptions: {
        series: {
                shadow: false,
                animation:false,
                enableMouseTracking: false
        }
}

我做错了什么？ 如果我使用 wkhtmltopdf 输出是正确的..

Answer 1

好的，我已经完成了!

问题出在完全水平(或垂直)的路径上，可能与 old's webkit bug 有关

我的解决方案是编辑网格的水平(和垂直)线，使其不完全水平垂直。

//fix bug of horizontal-vertical path (TODO: check all series)
yaxis = document.getElementsByClassName('highcharts-yaxis-grid')[0].childNodes;
for (i=0; i<yaxis.length; i++) {
    if (yaxis[i].nodeName.toLowerCase() == 'path') {
        d = yaxis[i].getAttribute('d').split(' ')[2];
        yaxis[i].setAttribute('d', yaxis[i].getAttribute('d').replace(d, parseInt(d)+0.000001));
    }
}

xaxis = document.getElementsByClassName('highcharts-xaxis-grid')[0].childNodes;
for (i=0; i<yaxis.length; i++) {
    if (yaxis[i].nodeName.toLowerCase() == 'path') {
        d = yaxis[i].getAttribute('d').split(' ')[1];
        yaxis[i].setAttribute('d', yaxis[i].getAttribute('d').replace(d, parseInt(d)+0.000001));
    }
}

例如，对于以下水平路径，我必须编辑数字 264.5、213.5、163 的第一个出现

<g class="highcharts-grid highcharts-yaxis-grid ">
    <path d="M 77 264.5 L 413 264.5"></path>
    <path d="M 77 213.5 L 413 213.5"></path>
    <path d="M 77 163.5 L 413 163.5"></path>
</g>

获取下面的非水平线

<g class="highcharts-grid highcharts-yaxis-grid ">
    <path d="M 77 264.500001 L 413 264.5"></path>
    <path d="M 77 213.500001 L 413 213.5"></path>
    <path d="M 77 163.500001 L 413 163.5"></path>
</g>