highcharts 隐藏除图例之外的图表答案

【问题标题】：highcharts hide the chart except the legendhighcharts 隐藏除图例之外的图表
【发布时间】：2015-08-10 12:31:27
【问题描述】：

有没有什么办法可以隐藏除图例之外的所有内容？

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

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

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

当我尝试添加此代码以覆盖 highcharts-legend > rect 的高度时：

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

这样做：

文字和符号没有显示出来。

【问题讨论】：

我猜即使您排除了图例类，您也没有排除它的内容，因此它隐藏了内容。您还需要找到一种方法来排除图例中的所有元素
唯一的问题是，当我将chart-container 设置为 70px 时，它会显示图例及其内容并隐藏所有内容，但是如果我将高度设置为 40px 或 30px，图例将成为第一个图片。我所做的是为highcharts-legend > rect 添加一个内联样式来调整高度，但它的内容不会显示出来。
您可以通过选项禁用所有元素。查看结果：jsfiddle.net/eo1wyyur。下一个解决方案是仅使用 HTML 打印图例。介绍如何打印自定义图例的类似演示。 jsfiddle.net/N3KAC/1

标签： javascript css highcharts

【解决方案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 的效果。要再次切换回来，您只需缓存之前的容器并再次替换克隆。

【讨论】：

您的示例隐藏了图例的某些部分。
我不知道你到底想隐藏什么。我解释了它的工作原理并举了一个例子。