使用canvas2svg.js将chart.js图表​​导出到svg [英] Exporting chart.js charts to svg using canvas2svg.js

问题描述

我正在尝试使用 chart.js 图表到svg。 /gliffy.github.io/canvas2svg/ rel = nofollow noreferrer> canvas2svg.js 。

I am trying to export chart.js chart to svg using canvas2svg.js.

由于图表，它似乎不起作用.js拒绝使用canvas2svg.js创建的伪画布

It does not seems to be working, since chart.js refuses to use 'fake' canvas created by canvas2svg.js

我的HTML代码：

<div style="position: relative; height:20vh; width:100vh">
<canvas id="radarCanvas" ></canvas>
</div>

我的脚本：

var ctx = document.getElementById("radarCanvas").getContext("2d");

var radarChart = new Chart(ctx, graphData);  // Works fine


// Create canvas2svg 'fake' context
var c2s = C2S(500,500);

// new chart on 'fake' context fails:
var mySvg = new Chart(c2s, graphData);
// Result (console):
// "Failed to create chart: can't acquire context from the given item"

我已在 Codepen上发布了完整示例（很抱歉，在那里的长篇js，我找不到从中导入canvas2svg的链接，所以我将其粘贴到脚本的开头。）

I've posted full example on Codepen (Sorry for long js there, I could not find a link from which to import canvas2svg so I pasted it at the beginnning of the script.)

推荐答案

如果使用最新的Chart.JS版本（在撰写本文时为2.7.1），则可以通过稍微调整一下canvas2svg来使其运行。
我将以下代码添加到canvas2svg中：看看 Codepen

If you use a recent Chart.JS version (2.7.1 at time of writing) you can get this running by tweaking canvas2svg a bit. I added the following code to canvas2svg: Have a look at the Codepen

ctx.prototype.getContext = function (contextId) {
    if (contextId=="2d" || contextId=="2D") {
        return this;
    }
    return null;
}

ctx.prototype.style = function () {
    return this.__canvas.style
}

ctx.prototype.getAttribute = function (name) {
    return this[name];
}

ctx.prototype.addEventListener =  function(type, listener, eventListenerOptions) {
    console.log("canvas2svg.addEventListener() not implemented.")
}

但是：只有在您禁用动画和图表（设置为false）。

BUT: It only works if you disable animation and responsiveness of the chart (set to false).

这篇关于使用canvas2svg.js将chart.js图表​​导出到svg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！