highcharts隐藏图表，但传说除外

Question

有没有办法可以隐藏除传奇之外的所有内容？

我尝试通过以下代码执行此操作：

$("svg > g:not(.highcharts-legend)").css("display", "none");
$("#chart-container").css(""height", "40px");

这个问题是它隐藏了图表并使图例可见，但是这样做：

当我尝试添加此代码以覆盖highcharts-legend＆gt;的高度时RECT：

$("svg > g:not(.highcharts-legend)").css("display", "none");
$("#chart-container").css(""height", "40px");
$("svg > g.highcharts-legend > rect").attr("style", "height: 27px;");

它这样做：

文字和符号没有显示。

Answer 1

隐藏具有display:none的元素也会隐藏所有子元素。因此，实现所需效果的唯一方法是克隆图例，仅使用图例构建一个highcharts svg并隐藏原始元素。

HTML

<div>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
    </div>
</div>
<div id="hs-clone" style="min-width: 310px; height: 400px; margin: 0 auto">
    <svg id="hs-clone-svg" version="1.1" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="453" height="400">
    </svg>
</div>
<button id="showLegendOnly">hide</button>

的jQuery

var $button = $('#showLegendOnly');
var $container = $('#container');
var $clone = $('#hs-clone');
var $cloneSvg = $('#hs-clone-svg');

$button.on('click', function(){
    var $legend = $('.highcharts-legend').clone();
    $cloneSvg.html($legend);
    $container.hide();
    $clone.show();
});

这里有一个 JSFiddle 。要再次切换回来，您可以先简单地缓存容器，然后再次替换克隆。