highcharts附加到highcharts容器div

Question

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

我已经尝试过了：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个元素的条形图，当我滚动到底部时，我想要在chart.without中再添加3个元素，减少高位图表的高度。

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>

​