Question

我正在使用SVG.toDataURL（）将c3js图表导出到png图像。将图表导出到png可以正常工作。

如果是折线图，则无法正确呈现。例如

x和y轴宽度增加。
线条不合适，而不是显示深黑色区域的线条。

以下是导出png的代码

 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)
            }
        })
    }

当我使用canvag库时会发生同样的事情。

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");

Answer 1

问题是导出器函数在执行导出时仅考虑内联CSS样式。换句话说，出口商正在失去对C3的css设置的跟踪，因此你的图表在出口之前就会像这个人一样

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

最重要的是，黑色三角形是由某些特定fill元素的.c3属性引起的。默认情况下，c3.css会将这些设置为none，但您的导出商并不知道。

请参阅：

并且，如果您从fill ...

手动关闭c3.min.css属性

您希望在导出之前以某种方式将这些特定元素的fill CSS属性设置为内联CSS（如）;

这是一个快速，简单的解决方法，在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/

Answer 2

也许有点晚了，但我希望这个解决方案可以帮助未来的开发者：

上面验证的解决方案对Barchart和其他人来说不起作用
所以，基于相同的原则，这就是我为每个图表类型进行导出工作所做的工作。这是一些例子：

假设我们在html中有这个，并且已经使用c3：

生成了图表

<div id="chartID" class="chart-content"></div>

然后，在我们的JS中，这是导出函数：

function exportChartToPng(chartID){
//fix weird back fill
d3.select('#'+chartID).selectAll("path").attr("fill", "none");
//fix no axes
d3.select('#'+chartID).selectAll("path.domain").attr("stroke", "black");
//fix no tick
d3.select('#'+chartID).selectAll(".tick line").attr("stroke", "black");
var svgElement = $('#'+chartID).find('svg')[0];
saveSvgAsPng(svgElement, chartID+'.png');
}

注意：saveSvgAsPng工具来自https://github.com/exupero/saveSvgAsPng

Answer 3

对于任何持续遇到此问题的人，我认为这可能会帮助您...

var nodeList    = $('svg .c3-chart path.c3-shape.c3-shape.c3-line');
var fillArea    = Array.from(nodeList);

fillArea.forEach(function(element){
  element.style.fill = "none";
})

将c3.js折线图导出为png图像不起作用

3 个答案: