Question

我正在使用HighCharts（特别是highstock.js）在页面上显示大量或图表。调整大量图表的极端值需要3-4秒（在我的示例中）。但是，由于只有一小部分图表可供用户在页面上查看，因此我只想设置那些可见的图表的极限值。

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 /所有包含所有高点图的位置的大小，因此可能会有可变数量的图表可供用户查看。

有什么方法可以确定哪些图表是可见的，以便只有那些图表可以设置其极端值？

如果是的话，当面板/ 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/

如何确定屏幕上是否显示HighChart？

1 个答案: