使用canvg将C3.js SVG可视化转换为Canvas——线图填充黑色矩形，“错误：元素“parsererror”尚未实现”

Question

使用canvg将C3.js SVG可视化转换为Canvas——线图填充黑色矩形，“错误：元素“parsererror”尚未实现”

7

我试图使用Canvg将SVG转换为Canvas。这是jsfiddle。我收到一个错误，说：“错误：元素'parsererror'尚未实现”。我可以理解Canvg库无法解析SVG元素。但是，这个问题有解决方案吗？我需要从SVG元素创建一个画布元素。

<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：svg元素是由C3.js（基于D3.js的可重用库）创建的。

- SriDev

2

你的JSFiddle不起作用，即使修复后也没有显示你描述的错误（至少在Chrome中）。添加了一些缺失的canvg样式，现在它可以工作了：http://jsfiddle.net/00cyv0py/ - methodofaction

非常感谢！！它起作用了！！ - SriDev

@Duopixel，我遇到了完全相同的问题，你的评论对我很有帮助。但是我无法解决另一个问题，就是文本样式。如果您看到轴标签，字体大小比生成的图像上的字体小。有什么想法可以解决这个问题吗？ - Sam

1

@Mugambo 你需要将样式内联到文本元素中，即 d3.select("text").attr("font-family", "sans-serif").attr("font-size", "13px")。 - methodofaction

@Duopixel：谢谢，这很有帮助！！ - Sam

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Buck · Accepted Answer

如评论和工作的jsfiddle中建议的那样，在生成画布之前明确设置刻度和路径特性：

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