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>

PS : svg 要素は C3.js (D3.js ベースの再利用可能なライブラリ) によって作成されます。

4

1 に答える 1