C3.js Visualizzazione SVG su Canvas con canvg - Grafici a linee con rettangoli neri, "ERRORE: Element 'parsererror' non ancora implementato"

Sto tentando di convertire un SVG in Canvas utilizzando Canvg. Ecco lo jsfiddle. Viene visualizzato un errore che dice "ERRORE: elemento 'parsererror' non ancora implementato". Posso capire che la libreria canvg non è in grado di analizzare l'elemento SVG. Ma c'è una soluzione a questo problema? Devo creare un elemento canvas dall'elemento svg.C3.js Visualizzazione SVG su Canvas con canvg - Grafici a linee con rettangoli neri, "ERRORE: Element 'parsererror' non ancora implementato"

<head> 
    <link href="lib/c3.css" rel="stylesheet" type="text/css"> 
    <script src="lib/jquery-2.1.4.min.js"></script> 

    <script src="lib/d3.min.js" charset="utf-8"></script> 
    <script src="lib/c3.min.js"></script> 

    <script type="text/javascript" src="lib/canvg.js"></script> 
    <script type="text/javascript" src="lib/rgbcolor.js"></script> 

</head> 
<body> 


<div id="chart"></div> 
<button onclick="myFunction()">Save</button> 


<header><h1>Canvas:</h1></header> 
<canvas id="svg-canvas"></canvas> 


<script> 
var chart = {}; 

chart = c3.generate({ 
bindto: '#chart', 
data: { 
    xs: { 
     'data1': 'x1', 
     'data2': 'x2', 
    }, 
    columns: [ 
     ['x1', '2013-01-01 03:11:37', '2013-01-02 03:11:37', '2013-02-03 03:11:37', '2013-03-04 03:11:37', '2013-03-05 03:11:37', '2013-04-06 03:11:37'], 
     ['x2', '2013-01-04 03:11:37', '2013-01-22 03:11:37', '2013-04-13 03:11:37', '2013-05-04 03:11:37', '2013-05-02 03:11:37', '2013-06-06 03:11:37'], 
     ['data1', 30, 200, 100, 400, 150, 250], 
     ['data2', 20, 180, 240, 100, 190,230] 
    ], 

    xFormat: '%Y-%m-%d %H:%M:%S', 

    names: { 
     data1: 'Success', 
     data2: 'Failure', 
    } 
}, 
axis: { 
    x: { 
     type: 'timeseries', 
     tick: { 
      format: '%Y-%m-%d %H:%M:%S', 
      count : 5 
     }   
    } 
}, 
zoom: { 
    enabled : true, 
    rescale: true, 
    extent: [1, 100] 
} 
}); 
chart.show(['data2']); 



function myFunction() { 
var $container = $('#chart'), 
    // Canvg requires trimmed content 
    content = $container.html().trim(), 
    canvas = document.getElementById('svg-canvas'); 

    // Draw svg on canvas 
    canvg(canvas, content); 



} 

</script> 
</body> 
</html>

P.S: L'elemento svg è stato creato da C3.js (d3.js basato libreria riutilizzabile).

fonte

2015-06-09 SriDev

tuo JSFiddle non funziona e quando riparato non visualizza l'errore che stai descrivendo (almeno in Chrome). Aggiunti alcuni stili mancanti per canvg e funziona: http://jsfiddle.net/00cyv0py/ – Duopixel

Grazie mille !! Ha funzionato !! – SriDev

@Duopixel Stavo affrontando lo stesso identico problema ed i tuoi commenti mi aiutano su questo. Ma un'altra cosa che non riesco a risolvere sono gli stili di testo, se vedi le etichette degli assi la dimensione dei caratteri è inferiore a quella che viene generata sull'immagine. Qualche idea su come risolverlo? – Anamadeya

Come suggerito nei commenti e sulla jsfiddle di lavoro, in modo esplicito impostare caratteristiche di zecche e il percorso prima di generare la tela:

<div id="chart"></div> 
<button id="save">Save</button> 
<h1>Canvas:</h1> 
<canvas id="svg-canvas"></canvas> 
<script>

...

$('#save').click(myFunction); 

function myFunction() { 
    d3.selectAll("path").attr("fill", "none"); 
    d3.selectAll(".tick line, path.domain").attr("stroke", "black"); 
    var $container = $('#chart'), 
    // Canvg requires trimmed content 
    content = $container.html().trim(), 
    canvas = document.getElementById('svg-canvas'); 

    // Draw svg on canvas 
    canvg(canvas, content); 
} 
</script>

See: http://jsfiddle.net/vcz468f9/5/

fonte

2016-05-16 00:37:32

Avevo anche alcuni font che volevo mostrare che stavano disegnando nel mio svg, ma non quando li ho esportati su una tela. Ho usato il codice qui sopra per rimuovere il bit nero dalla mia splin, quindi ho aggiunto quanto segue al font che volevo. d3.selectAll ("text"). attr ("font-family", "arial"). Risposta fantastica, grazie. – Severun

C3.js Visualizzazione SVG su Canvas con canvg - Grafici a linee con rettangoli neri, "ERRORE: Element 'parsererror' non ancora implementato"

risposta

Problemi correlati