Highcharts: Скрыть и показать легенду

Я хотел бы иметь возможность переключать видимость легенды диаграммы, когда пользователь нажимает кнопку.

Я попытался скрыть легенду, используя недокументированный метод destroy(), однако, когда я пытаюсь перерисовать легенду и ее элементы, элементы отображаются в левом верхнем углу диаграммы, а не внутри легенды. Элементы также не привязаны ни к одному из своих обработчиков событий (нажатие на элемент больше не переключает серию).

Есть ли лучший способ сделать это? Я должен поддерживать как SVG, так и VML-реализации, поэтому я ищу решение, которое будет решать оба.

Пример JSFiddle

$('#updateLegend').on('click', function (e) {
    var enable = !chart.options.legend.enabled;
    chart.options.legend.enabled = enable;

    if (!enable) {
        chart.legend.destroy(); //"hide" legend
    } else {
        var allItems = chart.legend.allItems;

        //add legend items back to chart
        for (var i = 0; i < allItems.length; i++) {
            var item = allItems[i];
            item.legendItem.add();
            item.legendLine.add();
            item.legendSymbol.add();
        }

        //re-render the legend
        chart.legend.render();
    }
});

Ответ 1

Если вы уничтожаете легенду, вам нужно создать полную легенду. Более простым решением является функция hide()/show() для элементов.

http://jsfiddle.net/sbochan/3Bh7b/1/

$('#updateLegend').click(function (e) {
        var legend = chart.legend; 

        if(legend.display) {
            legend.group.hide();
            legend.box.hide();
            legend.display = false;
        } else {

            legend.group.show();
            legend.box.show();
            legend.display = true;
        }
    });

Ответ 2

Вот интересное решение, которое я придумал - работает для Highcharts3 и Highstocks1.3 https://bitbucket.org/jkowalleck/highcharts-legendextension

Все, что вам нужно сделать, это добавить HighchartsExtension, который я написал на вашу HTML-страницу, и вы добавили 3 новых функции в диаграмму:
myChart.legendHide(),
myChart.legendShow() и
myChart.legendToggle()

См. примеры:
в Highcharts с плавающей легендой: http://jsfiddle.net/P2g6H/
в Highstocks со статической легендой: http://jsfiddle.net/ps6Pd/

Ответ 3

Достаточно простой способ сделать это - перебрать цикл и обновить их, чтобы они не отображались в легенде. Это позволяет вам оживить и отключить отображение легенды и использовать все пространство контейнера, поскольку методы встроены.

Например, переключение элементов легенды будет выглядеть так:

$('#toggleButton').click(function() {
    for(i in chart.series)
        chart.series[i].update({ showInLegend: chart.series[i].options.showInLegend == null ? false : !chart.series[i].options.showInLegend }, false);
    chart.redraw();
});

Смотрите эту демонстрацию JSFiddle для переключения, отображения и скрытия с помощью кнопок.

Ответ 4

Проще, чем

myChartObject.legend.update({
   enabled:true
)};

Ответ 5

Обновить код немного выбранного ответа. Теперь это увеличит пространство при отображении/скрытии легенды.

$('#updateLegend').click(function (e) {
    var legend = chart.legend; 

    if(legend.display) {
        legend.group.hide();
        legend.box.hide();
        legend.display = false;
    } else {

        legend.group.show();
        legend.box.show();
        legend.display = true;
    }

    var series = chart.series[0];
        $(chart.series).each(function(){
            this.setVisible(true, false);
        });
        chart.redraw();

});

Ответ 6

До сих пор только работающее решение в мире:

for (i = 0; i < chart.series.length; i++)
          chart.series[i].options.showInLegend = true;
          chart.series[0].setData(chart.series[0].data);

Рендеринг вручную не работает (скрытие legend.box и т.д., всегда, если в легенде есть несколько страниц, тогда кнопка браузера остается). setData вызывает внутренний рендерер, который действует неплохо и делает все, что нужно.
Хм, может быть, в конце концов вы можете это сделать:
chart.setSize( chartWidth, chartHeight+chart.legend.fullHeight, false );