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

Question

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

如果是折线图,它们将无法正确呈现.例如

1. x和y轴宽度增加.
2. 线条不合适,而不是显示深黑色区域的线条.

的jsfiddle

下面是导出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(如)

这里有一个快速,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/