All geek questions in one place

C3.js SVG Canvas visualization with canvg - Line charts filled with black rectangles, "ERROR: Element 'parsererror' not yet implemented"

I am trying to convert SVG to Canvas using Canvg. Here is the jsfiddle . I get an error: "ERROR: Element" parsererror "not yet implemented." I can understand that the canvg library cannot parse an SVG element. But is there a solution to this problem? I need to create a canvas element from an svg element.

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

PS: The svg element is created by C3.js (a reusable library based on D3.js).

+6
source share
1 answer

As suggested in the comments and on the working jsfiddle, I explicitly set the characteristics of the tick and path before creating the canvas:

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

+2
source

Source: https://habr.com/ru/post/988806/

More articles:


All Articles