使用canvas2svg.js將chart.js圖表​​導出爲svg

Question

我正嘗試使用canvas2svg.js將chart.js圖表導出爲svg。

這似乎並不奏效，因爲chart.js之拒絕使用由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的鏈接，所以我在腳本開始時粘貼了它。）

Answer 1

如果您使用最新的Chart.JS版本（寫作時爲2.7.1），則可以獲得這通過調整canvas2svg一點。 我下面的代碼添加到canvas2svg：有一個看看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）的作品。