javascript - highcharts 附加到 highcharts 容器 div

Question

我想附加到 highcharts div 并在 View 到达窗口滚动底部时呈现更多元素。

我试过这个:http://jsfiddle.net/kh5jY/8556/

        $('.chartheight').scroll('scroll', function(){
            if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight){
                data.push(5, 7, 3,4);
                chart.series[0].setData(data);
            }
        });

用例:当我滚动到底部时，我有一个包含 3 个元素的条形图，我希望将更多 3 个元素添加到图表中。而不降低 Highcharts 的高度。

Answer 1

不幸的是，Highcharts 中没有垂直滚动条。滚动页面时，您可能会触发系列更新和轴设置极值 - http://jsfiddle.net/re4d4q02/

$(function() {
  var lastScrollTop = 0;
  $(window).scroll(function(event) {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
      var data = [5, 7, 3, 5, 5, 5]
      chart.series[0].setData(data, false);
      chart.xAxis[0].setExtremes(3, 5);
    }
  });
  
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'bar'
    },
    title: {
      text: 'Fruit Consumption'
    },
    xAxis: {
      categories: ['Apples', 'Bananas', 'Oranges'],
      minRange: 1
    },
    yAxis: {
      title: {
        text: 'Fruit eaten'
      }
    },
    series: [{
      name: 'John',
      data: [5, 7, 3]
    }],
  });
});

.chartheight {
  height: 800px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" class="chartheight"></div>