wkhtmltoimage не показывает линии сетки графика высоких диаграмм

Question

Я использую Symfony для генерации простого графика высоких диаграмм, но 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

Хорошо, я сделал!

Проблема в идеально горизонтальном (или вертикальном) пути, вероятно, связана с старой ошибкой webkit

Тогда мое решение состоит в том, чтобы отредактировать горизонтальную (и вертикальную) линию сетки, чтобы сделать ее не совсем горизонтально-вертикальной.

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