C3. js SVG визуализация в Canvas с помощью canvg - я не вижу диаграммы данных линий на холсте - PullRequest
Новая
       28

C3. js SVG визуализация в Canvas с помощью canvg - я не вижу диаграммы данных линий на холсте

0 голосов
/ 03 февраля 2020

Я пытаюсь конвертировать SVG в Canvas с помощью Canvg. Вот это jsfiddle . Я хочу превратить SVG в холст, чтобы я мог позволить пользователю выводить файл в формате png. Мои проблемы в том, что данные линий не отображаются на холсте, а отображаются только оси и другие части, как на следующем снимке экрана:

enter image description here

Эта диаграмма c3 не имеет анимации, поэтому я думаю, что проблема не в том, что холст генерируется до анимации диаграммы c3.

Я также установил свойство fill CSS этих указанных элементов c как встроенное CSS (как в) перед экспортом.

Спасибо за вашу помощь.

Вот ресурсы, используемые моим кодом:

c3.min. js | с3. js | d3.v5. js | d3.v5.min. js | с3. css | rgbcolor. js | stackblur. js | canvg. js | canvg.min. js | умд. js

вот код: 

<html>
<body>
<div id="linkContainer"></div>

<div id="chart"></div>
<canvas id="svg-canvas"></canvas>

</body>
<html>

<script type="text/javascript">

var chart = c3.generate({
    oninit: function() {
        this.svg.attr('id', 'svgTrack')
    },
    bindto: '#chart',
    title: {
            text: 'CRUISE CHARTS ANALYSIS',
        },
    data: {
        columns: [
            ['data1', 100, 200, 150, 300, 200],
            ['data2', 400, 500, 250, 700, 300],
        ]
    },
    tooltip: {
            show: true,
        },


    type: 'line',
    colors: {
        data1: '#ff0000',
        data2: '#00ff00',
    }
});

// CSS
d3.selectAll("path").attr("fill", "none");
d3.selectAll(".tick line, path.domain").attr("stroke", "black");
d3.selectAll(".c3-line-data1").style.stroke = "black";

    // Take svg by ID
    var svg_content = document.getElementById('svgTrack').outerHTML;

    // Make picture

    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');

    v = canvg.Canvg.fromString(ctx, svg_content);//'<svg width="600" height="600"><text x="50" y="50">Hello World!</text></svg>');

    // Start SVG rendering with animations and mouse handling.
    v.start();

    var MIME_TYPE = "image/png";

    var imgURL = canvas.toDataURL(MIME_TYPE);

    var dlLink = document.createElement('a');
    dlLink.download = "fileName";
    dlLink.href = imgURL;
    dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');

    document.getElementById("linkContainer").appendChild(dlLink);

    // document.body.appendChild(dlLink);
    dlLink.click();
    // document.body.removeChild(dlLink);
</script>
...