wkhtmltoimage不显示highcharts图的网格线

Question

I'm using symfony to generate a simple highcharts graph , but wkhtmltoimage does not show the gridlines properly:

My knp_snappy.image config is the following:

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

and I have added the following options to the graph:

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

What am I doing wrong? If i use wkhtmltopdf the output is correct..

Answer 1

Ok, i have done!

The problem is with the perfectly horizontal (or vertical) path, probably is related with old's webkit bug

Than my solution is to edit the horizontal (and vertical) line of the grid to make it not perfectly horizontal-vertical.

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

For example, with the following horizontal path i have to edit the first occurrency of the number 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>

to obtain the following non-horizontal lines

<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>