Nano Hash - криптовалюты, майнинг, программирование

Заставьте легенду исчезнуть в Highcharts

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

Я пробовал все, что мог придумать, и все, что мне удалось сделать, это заставить SVG легенды скрывать и показывать с помощью chart.legend.[group, nav, container].hide(), но пустое пространство, которое занимает легенда, никогда не исчезает. Я даже пытался удалить элемент DOM легенды, но размер диаграммы не менялся (даже вызовы chart.reflow() не помогают.

См. здесь: http://jsfiddle.net/zbzzn/q83h5g4z/1/

Есть ли способ заставить легенду исчезнуть и переформатировать диаграмму, чтобы пробелы в легенде исчезли?

highcharts
12.10.2014

Ответы:


1

Вот мой набросок метода переключения, который находится непосредственно в прототипе Legend. Это позволяет избежать изменения ширины и высоты контейнера.

Highcharts.Legend.prototype.toggle = function () {
    if (this.display) {
        this.group.hide();
    } else {
        this.group.show();
    }
    this.display = !this.display;
    this.chart.isDirtyBox = true;
    this.chart.redraw();
};

Живая демонстрация на http://jsfiddle.net/highcharts/3Bh7b/76/

15.10.2014
  • Спасибо за решение, у него все еще есть проблема с группой навигации: jsfiddle.net/3Bh7b/79 19.10.2014
  • И я забыл упомянуть, что иногда у меня есть серии, добавленные во время выполнения, поэтому, даже если я скрою эту группу навигации, она снова появится, если вы добавите другую серию. 19.10.2014

    • 2

    Мне удалось взломать его, который работает:

    http://jsfiddle.net/q83h5g4z/4/

    Я очень надеюсь, что есть другой способ сделать это без взлома.

        if (!isVisible) {
        originalLegendHeight = legend.legendHeight;
        legend.options.maxHeight = -1; //0 doesn't work :( because someone did "if (maxHeight)" instead of "if (maxHeight === null)" 
        $('#container').height($('#container').height()-legend.legendHeight); 
        chart.redraw();
        chart.reflow();
    } else {
        legend.options.maxHeight = null;
        $('#container').height($('#container').height()+originalLegendHeight);
        chart.redraw();
        chart.reflow();
    }
    13.10.2014

    3

    Посмотрите это решение:

    http://jsfiddle.net/3Bh7b/73/

    var legend = chart.legend; 

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

                legend.group.show();
                legend.display = true;
            }
    13.10.2014
  • Я начал свои тесты с этого решения (см. Описание вопроса), но оно не сработало, потому что оно не изменяет размер диаграммы и не скрывает группу навигации, когда она появляется. 13.10.2014
  • Действительно, вы правы, я не вижу этого требования. 13.10.2014
  • У вас есть другое решение, кроме того, что в моем ответе? Могу ли я разместить эту функцию в качестве запроса на улучшение на GitHub HighCharts? 13.10.2014
  • Мы собираем все предложения в нашей службе uservoice, чтобы вы могли публиковать их там. См. следующий пример, который я подготовил: jsfiddle.net/3Bh7b/74 13.10.2014
  • Спасибо за информацию. В этом примере та же проблема все еще существует. Элемент highcharts-legend по-прежнему занимает 75 пикселей. 13.10.2014
  • Похоже, запрос уже был запрошен - highcharts.uservoice.com /forums/55896-general/предложения/ 13.10.2014

    • 4

    Окончательное решение, которого я достиг (где legendVisible определяет видимость легенды):

                var legendElement = $(chart.container).find('.highcharts-legend');
            if (legendElement.length > 0) {
                if (chart.legend.options.enabled && legendVisible) {
                    legendElement.show();
                    chart.legend.options.maxHeight = chart.legend.options.originalMaxHeight || null;
                    chart.reflow();
                } else {
                    legendElement.hide();
                    chart.legend.options.originalMaxHeight = chart.legend.options.maxHeight;
                    chart.legend.options.maxHeight = -1;
                    chart.reflow();
                }
            }
    14.10.2014
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..