導出c3.js折線圖到PNG圖像不起作用

我正在使用SVG.toDataURL（）將c3js圖導出到PNG圖像。導出圖表到PNG正常工作。導出c3.js折線圖到PNG圖像不起作用

在折線圖的情況下，它們不能正確渲染。例如

x和y軸寬度增加。
線條不正確，而不是線條顯示深黑色區域。

下面是導出爲png當我使用canvag庫

function exportImageAsPNG(){ 
     var svgElements = $("#chart").find('svg'); 
     var svg ; 
     svgElements.each(function() { 
      svg = this; 
     }); 
     var img = document.getElementById("fromcanvas"); 
     svg.toDataURL("image/png", { 
      callback: function(data) { 
       img.setAttribute("src", data) 
      } 
     }) 
    }

同樣的事情發生的代碼。

var $container = $('#chart'), 
content = $container.html().trim(), 
canvas = document.getElementById('svg-canvas'); 

// Draw svg on canvas 
canvg(canvas, content); 

// Change img be SVG representation 
var theImage = canvas.toDataURL('image/png'); 

$("#hiddenPng").attr('href', theImage); 
$("#hiddenPng span").trigger("click");

來源

2016-06-08 ashishjmeshram

見這個傢伙的答案在這裏 - > http://stackoverflow.com/a/37245183/368214 – mgraham

問題是導出器函數在執行導出時僅考慮內聯CSS樣式。換句話說，出口正在失去的C3的CSS設置的軌道，因此你的圖形看起來就像這個傢伙的權利是出口

https://github.com/c3js/c3/issues/356前

最重要的是，黑三角是由某些特定的fill財產造成.c3元素。 c3.css默認情況下將這些設置爲none，但您的導出程序不知道這一點。

參見：

而且，如果你手動關閉從c3.min.css的fill財產...

你會希望以某種方式設置fill CSS屬性這些特定元素作爲內嵌CSS（如在輸出之前）

下面是一個快速，plainJS修復此問題，在genChart();和exportImageAsPNG();之間添加這些行以解決您的問題。

genChart(); 
    var nodeList = document.getElementById('chart').querySelector('svg').querySelectorAll('.c3-chart path'); 
    var nodeList2 = document.getElementById('chart').querySelector('svg').querySelectorAll('.c3-axis path'); 
    var nodeList3 = document.getElementById('chart').querySelector('svg').querySelectorAll('.c3 line'); 
    var line_graph = Array.from(nodeList); 
    var x_and_y = Array.from(nodeList2).concat(Array.from(nodeList3)); 
    line_graph.forEach(function(element){ 
     element.style.fill = "none"; 
    }) 
    x_and_y.forEach(function(element){ 
     element.style.fill = "none"; 
     element.style.stroke = "black"; 
    }) 
    exportImageAsPNG();

的jsfiddle： https://jsfiddle.net/vtange/vajs3cmf/

來源

2016-06-17 04:53:30 vtange

我一直在掙扎出口C3。 js很長一段時間，你的回答指向了正確的方向。謝謝！ – amenadiel

太棒了！ C3.js SVG到PNG的唯一正常工作解決方案。 –

thankyou @vtange上面的解決方案適用於折線圖，在** genChart函數之後還有一個問題**圖形圖例的顏色更改爲代碼中使用的顏色'element.style.stroke =「black 「;任何我如何修復相同的但是導出c3的其他圖表還存在其他問題有沒有其他解決方案可以導出svg到png /或其他圖像格式 – Srinivas

導出c3.js折線圖到PNG圖像不起作用

回答

相關問題