HighChart скрывает другие серии при нажатии на легенду

Мне нужно скрыть другие серии в HighChart (линейная диаграмма) при нажатии на легенду, поэтому я пробовал что-то, что в настоящее время скрывает другие строки серии, но когда я пытаюсь щелкнуть ту же легенду, она снова показывает другую серию, что неверно .

$(function () {
    var chart;

    $(document).ready(function() {

        chart = new Highcharts.Chart({

            chart: {

                renderTo: 'container',

                type: 'line',

                marginRight: 130,

                marginBottom: 25

            },
            plotOptions: {
        line: {

                events: {
                    legendItemClick: function () {
                        chart.yAxis[0].addPlotLine({
                        value : 7.5,
                        color : 'green',
                        dashStyle : 'shortdash',
                        width : 2,
                        label : {
                            text : 'My PlotLine'
                        }
                    });

                     if (!this.visible)
                     return true;

                    var seriesIndex = this.index;
                    var series = this.chart.series;

                    for (var i = 0; i < series.length; i++)
                    {
                        if (series[i].index != seriesIndex)
                        {

                            series[i].visible ? series[i].hide() :                                                 series[i].show();
                        } 
                    }
                     return false;
                        //return false; // <== returning false will cancel the default action
                    }
                }
            ,
            showInLegend: true
        }
    },                
            title: {

                text: 'Monthly Average Temperature',

                x: -20 //center

            },

            subtitle: {

                text: 'Source: WorldClimate.com',

                x: -20

            },

            xAxis: {

                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',

                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

            },

            yAxis: {

                title: {

                    text: 'Temperature (°C)'

                },

                plotLines: [{

                    value: 0,

                    width: 1,

                    color: '#808080'

                }]

            },

            tooltip: {

                formatter: function() {

                        return '<b>'+ this.series.name +'</b><br/>'+

                        this.x +': '+ this.y +'°C';

                }

            },

            legend: {

                layout: 'vertical',

                align: 'right',

                verticalAlign: 'top',

                x: -10,

                y: 100,

                borderWidth: 0

            },


            series: [{

                name: 'Tokyo',

                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

            }, {

                name: 'New York',

                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]

            }, {

                name: 'Berlin',

                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]

            }, {

                name: 'London',

                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

            }]

        });

    });


});

Проще говоря, когда я нажимаю на легенду, она должна открывать только строку беспокойства,

Пример скрипки

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
2 712
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете решить это в соответствии со своей спецификацией следующим образом:

var seriesIndex = this.index;
var series = this.chart.series;
if (this.visible && this.chart.restIsHidden) {
  for (var i = 0; i < series.length; i++) {
    if (series[i].index != seriesIndex) {
      series[i].show();
    }
  }
  this.chart.restIsHidden = false;
} else {
  for (var i = 0; i < series.length; i++) {
    if (series[i].index != seriesIndex) {
      series[i].hide();
    }
  }
  this.show()
  this.chart.restIsHidden = true;
}
return false;

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

Рабочий пример JSFiddle:http://jsfiddle.net/eolden/93mLoc1f/14/

Отличный ответ :). Еще один вопрос, как мы можем сбросить всю легенду, нажав кнопку сброса или что-то в этом роде?

Jothi Kannan 06.02.2019 13:22

@JothiKannan, попробуйте щелкнуть «активную» легенду еще раз, чтобы сбросить настройки.

Core972 06.02.2019 13:26

Лучшее решение для большого количества легенд

plotOptions: {
    line: {
      events: {
        legendItemClick: function() {
          var seriesIndex = this.index;
          var series      = this.chart.series;
            if (this.visible && this.chart.restIsHidden) {
                $(series).each(function(){
                    this.setVisible(true, false);
                });
                this.chart.restIsHidden = false;
              } else {
                $(series).each(function(){
                    this.setVisible(false, false);
                });
                this.show()
                this.chart.restIsHidden = true;
              }
              return false;
            }
        },
        showInLegend: true
    }
}

Другие вопросы по теме