Как я могу определить, отображается ли HighChart на экране?

Question

Я использую HighCharts (в частности, highstock.js) для отображения большого числа или диаграмм на странице.Настройка крайних значений большого количества графиков занимает 3-4 секунды (в моем примере).Однако, так как только часть диаграмм доступна для использования на странице, я бы хотел установить крайние значения только тех диаграмм, которые видны.

https://jsfiddle.net/Eves/kapnLbwh/61/

var data = [];
var time = (new Date()).getTime();
for (i = -100; i <= 0; i++) {
  data.push({
    x: time + i * 1000,
    y: Math.random()
  });
}
var create = function(id) {
  $(document.body).append("<div id='c" + id.toString() + "'></div>");
  $('#c' + id.toString()).highcharts({
    chart: {
      type: 'spline',
      animation: Highcharts.svg, // don't animate in old IE
      marginRight: 10,
    },
    title: {
      text: 'Live random data'
    },
    xAxis: {
      type: 'datetime',
      tickPixelInterval: 150
    },
    yAxis: {
      title: {
        text: 'Value'
      },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }]
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.series.name + '</b><br/>' +
          Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
          Highcharts.numberFormat(this.y, 2);
      }
    },
    legend: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    series: [{
      name: 'Random data',
      data: data
    }]
  });
}
var totalCharts = 177;
for (var i = 0; i < totalCharts; i++) {
  create(i);
}
var min = data[1].x;
var max = data[data.length - 2].x;
var startTime = moment();
for (var i = 0; i < totalCharts; i++) {
  var chart = $('#c' + i.toString()).highcharts();
  chart.xAxis[0].setExtremes(min, max);
  chart.redraw();
}
var endTime = moment();
var ms = moment(endTime, "DD/MM/YYYY HH:mm:ss").diff(moment(startTime, "DD/MM/YYYY HH:mm:ss"));
var d = moment.duration(ms);
var s = Math.floor(d.asHours()) + moment.utc(ms).format(":mm:ss:SSS");
console.log(s.valueOf());

Очевидно, что размеры экрана различаются, и пользователи могут потенциально регулировать размер панели / div / независимо от того, где содержатся все старшие диаграммы. Возможно, число переменнойдиаграмм, которые будут доступны для просмотра пользователю.

Есть ли способ определить, какие диаграммы можно просматривать, чтобы их экстремумы можно было установить только для этих диаграмм?

И если да, может ли событие обрабатывать проверку того, какие диаграммы доступны для просмотра, когдаpanel / div / что бы ни изменялось (по размеру или прокрутке), а затем устанавливал эти крайности любых новых отображаемых диаграмм?

Answer 1

Используя метод getBoundingClientRect, вы можете сравнить позицию контейнера диаграммы с текущим окном просмотра:

function areChartsInViewport() {
    var charts = Highcharts.charts,
        bounding;

    charts.forEach(function(chart) {
        bounding = chart.container.getBoundingClientRect();
        if (
            bounding.bottom >= 0 &&
            bounding.top <=
            (window.innerHeight || document.documentElement.clientHeight)
        ) {
            chart.isInViewport = true;
        } else {
            chart.isInViewport = false;
        }
    });
}

areChartsInViewport();

window.addEventListener('scroll', function(event) {
    areChartsInViewport();
});

Демонстрационная версия: https://jsfiddle.net/BlackLabel/tkj904be/

Документы: https://developer.mozilla.org/pl/docs/Web/API/Element/getBoundingClientRect

Полезный пример: https://gomakethings.com/how-to-test-if-an-element-is-in-the-viewport-with-vanilla-javascript/