C3.js SVG用Canvg可视化为Canvas - 用黑色矩形填充的曲线图，“ERROR：Element”parsererror“尚未实现” [英] C3.js SVG visualization to Canvas with canvg - Line charts filled with black rectangles , "ERROR: Element 'parsererror' not yet implemented"
问题描述
我试图使用Canvg将SVG转换为Canvas。这是 jsfiddle 。我得到一个错误说，错误：元素'parsererror'尚未实现。我可以理解，canvg库不能解析SVG元素。但是，这个问题有解决方案吗？我需要从svg元素创建一个canvas元素。
I am attempting to convert a SVG to Canvas using Canvg. Here is the jsfiddle. I get an error saying, "ERROR: Element 'parsererror' not yet implemented". I can understand that the canvg library is not able to parse the SVG element. But, Is there a solution to this problem ? I need to create a canvas element from 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：svg元素是由C3.js（基于D3.js的可重用库）创建的。 / p>
P.S : The svg element is created by C3.js (D3.js based reusable library).
推荐答案
如评论和工作jsfiddle中所建议，显式设置tick和path特性，
As suggested in the comments and on the working jsfiddle, explicitly set tick and path characteristics before generating 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>
请参阅： http://jsfiddle.net/vcz468f9/5/
这篇关于C3.js SVG用Canvg可视化为Canvas - 用黑色矩形填充的曲线图，“ERROR：Element”parsererror“尚未实现”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
