导出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图像不起作用

回答

相关问题