有没有办法在下载时显示正确的切换图例？

Question

我正在使用 c3 图表。我有一个按钮可以使用 canvg 下载它。单击图例时，我也有它的切换栏。下载有效，切换也有效。

下载中的唯一问题是我可以始终显示图例（即使它们对应的条未显示）或者只要我切换图例，图例就不会再出现在下载中（尽管它在图表本身上确实如此）。

我想要的是图例只有在相应的条形图实际显示时才会出现。如果显示他们的栏，我也不希望隐藏图例。 (Legend Shown <=> Bar Shown 种关系)

我过去在使用 IE 时遇到过问题，所以在 https://github.com/c3js/c3/issues/2528 之后显示是 'Block'。

var string = ".c3-legend-item-hidden";//hides legends that are unselected in the download. Will KEEP them hidden even if retoggled :( 

d3.selectAll(string).each(function() {
    var element = this;
    var computedStyle = getComputedStyle(element, null);
    for (var i = 0; i < computedStyle.length; i++) {
        var property = computedStyle.item(i);
        element.style[property] = computedStyle.getPropertyValue(property);
    }
});

//removing this section makes all legends appear permanently regardless of whether the bar does

预计：a graph that has the correct bars and legends shown in the downloads

实际：

（带代码段）hidden legends that do not reappear when needed

（无代码段）legends that are never hidden

更新：澄清一下，这在将图形转换为下载的 svg 文件（添加 xmlns 等）时有效，但在使用 canvg 和下载到 png 文件时无效（这是我需要它做的） .

Answer 1

不使用计算样式，而是手动设置您需要的样式。

这个解决方案对我有用（'hidden' 图例略微可见，但它现在与我的实际图表完全相同，这是我个人所需要的）：

var string = ".c3-legend-item-hidden";

d3.selectAll(string).each(function() {
 //this.style['visibility']='hidden'; // uncomment this out and it will completely hide the legend if that is what you want
 this.style['opacity']= 0.15; 
 // set opacity as 0 to make the legend transparent to the point you can't see it (if that is what you want) 
 // or 0.15 to make it like the chart (as done here and in c3.css)
});

计算出的样式提供的样式比您需要的多很多，并且可以覆盖您想要的样式。

有没有办法在下载时显示正确的切换图例？

Is there a way to make the correct toggled legends appear when downloading?

javascript

d3.js

bar-chart

legend

c3.js