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

Posted 2023-02-16

【中文标题】有没有办法在下载时显示正确的切换图例？

【英文标题】：Is there a way to make the correct toggled legends appear when downloading?

【发布时间】：2019-11-30 14:25:41

【问题描述】：

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

下载中唯一的问题是，我要么总是显示图例（即使它们对应的条没有显示），要么一旦我切换图例，图例就再也不会出现在下载中（尽管它确实在图表本身上）。

我希望图例仅在其相应的条实际显示时才出现。如果正在显示它们的栏，我也不希望隐藏传说。 （Legend Shown Bar Shown 种关系）

我过去遇到过 IE 问题，所以在 https://github.com/c3js/c3/issues/2528 之后显示为“阻止”。

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 文件时无效（这是我需要它做的）。

【参考方案1】：

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

此解决方案对我有用（“隐藏”图例略微可见，但现在与我个人需要的实际图表相同）：

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

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