highcharts highchartsコンテナdivに追加

Question

ハイチャート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つの要素を持つ棒グラフを持って、私はより多くの3つの以上の要素がchart.without高の高さに追加することにしたいですチャートが減少する。

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>