Эффект свечения HighCharts на графиках не влияет на несколько графиков

Question

Итак, я создаю эффект свечения для диаграмм

Но только первая диаграмма показывает эффекты, а все остальные таблицы невидимы (данные загружены, но график невидим).

Когда я комментирую часть эффекта свечения из css, все снова прошло гладко.

Все остальные диаграммы имеют точно такую ​​же настройку, но почему-то (#glow) просто не применяется к остальным трем диаграммам.Можете ли вы помочь мне, пожалуйста?Очень признателен!

Это ссылка, по которой я получаю настройку кода для фильтра: url (#glow):

http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/css/shadow/

И это ссылка, где я воспроизвел проблему:

http://jsfiddle.net/x6eg4ka7/20/

//JavaScript
$("#First").on("click", function (event) {
    document.getElementById("container2").style.display = "none";
  var BTCstockChart = Highcharts.stockChart('container', {
      time: {
          timezone: 'America/New_York'
      },
      chart: {
          styledMode: true
      },
      yAxis: {
          title: {
              text: 'Price',
              style: {
                  color: '#FFF'
              }
          },
          labels: {
              style: {
                  color: '#b5ffb5'
              }
          }
      },
      xAxis: {
          type: 'datetime',
          dateTimeLabelFormats: {
              second: '%Y-%m-%d<br/>%H:%M:%S',
              minute: '%Y-%m-%d<br/>%H:%M',
              hour: '%Y-%m-%d<br/>%H:%M',
              day: '%Y<br/>%m-%d',
              week: '%Y<br/>%m-%d',
              month: '%Y-%m',
              year: '%Y'
          },
          labels: {
              style: {
                  color: '#b5ffb5'
              }
          }
      },
          rangeSelector: {
          allButtonsEnabled: true,
          inputEnabled: false,
          buttonSpacing: 8,
          labelStyle: {
              color: '#f7d3d3'
          },
          buttons: [{
              type: 'day',
              count: 1,
              text: '1D',
              events: {
                  click: function () {
                      BTCstockChart.series[0].update({
                        data: [
                          [1562558400000, 70.9],
                          [1562559400000, 10],
                          [1562560400000, 50.9],
                          [1562561400000, 20.9],
                          [1562562400000, 100.9],
                          [1562563400000, 40.9],
                          [1562564400000, 60.9],
                          [1562565400000, 29.9]
                        ]
                      },true);
                  }
              }
          },{
              type: 'day',
              count: 3,
              text: '3D',
              events: {
                  click: function () {
                      BTCstockChart.series[0].update({
                        data: [
                          [1562558400000, 74.9],
                          [1562559400000, 1],
                          [1562560400000, 30.9],
                          [1562561400000, 25.9],
                          [1562562400000, 29.9],
                          [1562563400000, 58.9],
                          [1562564400000, 29],
                          [1562565400000, 68.90]
                        ]
                      },true);
                  }
              }
          }, {
              type: 'all',
              text: 'All',
              events: {
                  click: function () {
                      BTCstockChart.series[0].update({
                        data: [
                          [1562558400000, 29.9],
                          [1562559400000, 50],
                          [1562560400000, 80.9],
                          [1562561400000, 100.9],
                          [1562562400000, 10.9],
                          [1562563400000, 30.9],
                          [1562564400000, 50.9],
                          [1562565400000, 29.9]
                        ]
                      },true);
                  }
              }
          }]
      },
      navigator: {
          enabled: false
      },
      scrollbar: {
          enabled: false
      },

      legend: {
          layout: 'vertical',
          align: 'left',
          verticalAlign: 'middle'
      },

      plotOptions: {
          series: {
              turboThreshold: 4000
              //label: {
              //    boostThreshold: 1,
              //    connectorAllowed: false
              //}
          }
      },

      series: [{
          name: 'Bitcoin',
          data: [
            [1562558400000, 29.9],
            [1562559400000, 50],
            [1562560400000, 80.9],
            [1562561400000, 100.9],
            [1562562400000, 10.9],
            [1562563400000, 30.9],
            [1562564400000, 50.9],
            [1562565400000, 29.9]
          ]
      }],

      responsive: {
          rules: [{
              condition: {
                  maxWidth: 500
              },
              chartOptions: {
                  legend: {
                      layout: 'horizontal',
                      align: 'center',
                      verticalAlign: 'bottom'
                  }
              }
          }]
      },
      defs: {
          glow: {
              tagName: 'filter',
              id: 'glow',
              opacity: 0.1,
              children: [{
                  tagName: 'feGaussianBlur',
                  result: 'coloredBlur',
                  stdDeviation: 2.5
              }, {
                  tagName: 'feMerge',
                  children: [{
                      tagName: 'feMergeNode',
                      in: 'coloredBlur'
                  }, {
                      tagName: 'feMergeNode',
                      in: 'SourceGraphic'
                  }]
              }]
          }
      },
      credits: {
          enabled: false,
      }
  });
});







$("#Second").on("click", function (event) {
    document.getElementById("container").style.display = "none";
  var ETHstockChart = Highcharts.stockChart('container2', {
      time: {
          timezone: 'America/New_York'
      },
      chart: {
          styledMode: true
      },
      yAxis: {
          title: {
              text: 'Price',
              style: {
                  color: '#FFF'
              }
          },
          labels: {
              style: {
                  color: '#b5ffb5'
              }
          }
      },
      xAxis: {
          type: 'datetime',
          dateTimeLabelFormats: {
              second: '%Y-%m-%d<br/>%H:%M:%S',
              minute: '%Y-%m-%d<br/>%H:%M',
              hour: '%Y-%m-%d<br/>%H:%M',
              day: '%Y<br/>%m-%d',
              week: '%Y<br/>%m-%d',
              month: '%Y-%m',
              year: '%Y'
          },
          labels: {
              style: {
                  color: '#b5ffb5'
              }
          }
      },
      rangeSelector: {
          allButtonsEnabled: true,
          inputEnabled: false,
          buttonSpacing: 8,
          labelStyle: {
              color: '#f7d3d3'
          },
          buttons: [{
              type: 'day',
              count: 1,
              text: '1D',
              events: {
                  click: function () {
                      ETHstockChart.series[0].update({
                        data: [
                          [1562558400000, 70.9],
                          [1562559400000, 10],
                          [1562560400000, 50.9],
                          [1562561400000, 20.9],
                          [1562562400000, 100.9],
                          [1562563400000, 40.9],
                          [1562564400000, 60.9],
                          [1562565400000, 29.9]
                        ]
                      },true);
                  }
              }
          },{
              type: 'day',
              count: 3,
              text: '3D',
              events: {
                  click: function () {
                      ETHstockChart.series[0].update({
                        data: [
                          [1562558400000, 74.9],
                          [1562559400000, 1],
                          [1562560400000, 30.9],
                          [1562561400000, 25.9],
                          [1562562400000, 29.9],
                          [1562563400000, 58.9],
                          [1562564400000, 29],
                          [1562565400000, 68.90]
                        ]
                      },true);
                  }
              }
          }, {
              type: 'all',
              text: 'All',
              events: {
                  click: function () {
                      ETHstockChart.series[0].update({
                        data: [
                          [1562558400000, 29.9],
                          [1562559400000, 50],
                          [1562560400000, 80.9],
                          [1562561400000, 100.9],
                          [1562562400000, 10.9],
                          [1562563400000, 30.9],
                          [1562564400000, 50.9],
                          [1562565400000, 29.9]
                        ]
                      },true);
                  }
              }
          }]
      },
      navigator: {
          enabled: false
      },
      scrollbar: {
          enabled: false
      },

      legend: {
          layout: 'vertical',
          align: 'left',
          verticalAlign: 'middle'
      },

      plotOptions: {
          series: {
              turboThreshold: 4000
              //label: {
              //    boostThreshold: 1,
              //    connectorAllowed: false
              //}
          }
      },

      series: [{
          name: 'Bitcoin',
          data: [
            [1562558400000, 29.9],
            [1562559400000, 50],
            [1562560400000, 80.9],
            [1562561400000, 100.9],
            [1562562400000, 10.9],
            [1562563400000, 30.9],
            [1562564400000, 50.9],
            [1562565400000, 29.9]
          ]
      }],

      responsive: {
          rules: [{
              condition: {
                  maxWidth: 500
              },
              chartOptions: {
                  legend: {
                      layout: 'horizontal',
                      align: 'center',
                      verticalAlign: 'bottom'
                  }
              }
          }]
      },
      defs: {
          glow: {
              tagName: 'filter',
              id: 'glow',
              opacity: 0.1,
              children: [{
                  tagName: 'feGaussianBlur',
                  result: 'coloredBlur',
                  stdDeviation: 2.5
              }, {
                  tagName: 'feMerge',
                  children: [{
                      tagName: 'feMergeNode',
                      in: 'coloredBlur'
                  }, {
                      tagName: 'feMergeNode',
                      in: 'SourceGraphic'
                  }]
              }]
          }
      },
      credits: {
          enabled: false,
      }
  });
});

Может кто-нибудь помочь мне, пожалуйста?Очень признателен!

С наилучшими пожеланиями,

Сида Чжан

Answer 1

Проблема заключается в способе реализации.Давайте проанализируем, что происходит шаг за шагом.

Прежде всего, у вас есть определение стиля CSS для .highcharts-graph, где filter: url(#glow); установлено для всех элементов этого класса.Это означает, что обе серии диаграмм искали элемент #glow в дереве DOM, и оба они имеют одно и то же определение фильтра #glow в конфигурации, так что в сумме есть два элемента в дереве DOM с одинаковымid.

Если вы установите display: none для контейнера первой диаграммы, он все еще существует в дереве DOM, но все его дочерние элементы также имеют display: none, включая элемент #glow.Обратите внимание, что если браузер ищет элемент с определенным id, он всегда возвращает первый найденный элемент.

И здесь появляется источник проблемы.Как вы, наверное, уже поняли, фильтр #glow, который имеет display: none, установлен на элементе .highcharts-graph второго графика, и поэтому вся линия ряда исчезает сразу после изменения графиков.

Лучшим решением будет изменить id, чтобы они отличались (например, #glow и #glow2), и реорганизовать CSS, как показано ниже:

#container .highcharts-graph {
  filter: url(#glow);
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#container2 .highcharts-graph {
  filter: url(#glow2);
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

Живой пример: http://jsfiddle.net/BlackLabel/qv4d3rax/

С уважением!