Question

我正在尝试隐藏图表上的特定图例项目（http://api.highcharts.com/highcharts/legend）。如果我循环遍历chart.legend.allItems并尝试更改特定项目的可见属性，则它根本不会影响图例。

$.each(chart.legend.allItems, function() {
    this.visible = false;
});

如何在图表中隐藏特定的图例项目？

Answer 1

我认为这比实际情况要复杂得多。

您可以在系列的配置选项中将showInLegend设置为false。

如果您需要以编程方式执行此操作，则可以使用series.update()动态完成此操作。

参考：

Answer 2

我在FileDownloadName

中找到了其他解决方案

var item = chart.series[1];
//hide serie in the graph
item.hide();
item.options.showInLegend = false;
item.legendItem = null;
chart.legend.destroyItem(item);
chart.legend.render();

编辑：最新版本的highcharts的其他解决方案：

$('#container').highcharts().series[1].update({ showInLegend: false });

Answer 3

您可以使用load event - Highcharts Doc

执行此操作

chart: {
        events: {
            load: function() {
                var myChart = this;

                $.each(myChart.series, function(index, serie) {
                    if(index === 2 ) { // hide serie
                        serie.hide();
                    }
                });
        }
    }
},

这是fiddle

Answer 4

如果你想隐藏一些标签，可以根据系列的一些特殊功能添加一些css类来隐藏它们。我传递了一个示例，其中系列隐藏了空数据并隐藏了标签：

for (var i = 0; i < chart.series.length; i++) {
    if (chart.series[i].dataMax === 0) {
        chart.series[i].hide();
    }
}
$("#charContent").find('.highcharts-legend-item-hidden').each(function () {
    $(this).addClass('hidden');
});

在css中：

.highcharts-legend-item-hidden.hidden {
    display: none;
}

也许它不是一个非常干净的解决方案，但它对我有用

如何隐藏特定的图例项？

4 个答案: