Question

我想追加到highcharts div并在视图到达窗口底部滚动时渲染更多元素。

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

usecase：我有一个带有3个元素的条形图当我滚动到底部时我想要将更多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>

highcharts附加到highcharts容器div

1 个答案: