[前へ]、[次へ]のコントロールを縦棒グラフでページ分割しますか？

Question

私はColumnハイチャートを作成しました。そのためにページングを作成する必要があります。

どのように私は前進、後退、次の、前のコントロールでページ番号を達成できますか？

私は、以下のように縦棒グラフのコードを持って

$(function() { 
    $('#ao-demand-distribution').highcharts({ 
     chart: { 
      type: 'column', 
      spacingBottom: 0, 
      spacingTop: 0, 
      spacingLeft: 0, 
      spacingRight: 0, 

     }, 
     title: { 
      text: '' 
     }, 
     subtitle: { 
      text: '' 
     }, 
     xAxis: { 
      categories: [ 
       'S1', 
       'S2', 
       'S3', 
       'S4', 
       'S5', 
       'S6', 
       'S7', 
       'S8' 
      ], 
      crosshair: false, 
      gridLineWidth: 0, 
      tickWidth : 0 
     }, 
     yAxis: { 
      min: 0, 
      max: 150, 
      title: { 
       text: '' 
      }, 
      labels: { 
       enabled: false 
      }, 
      gridLineWidth: 0, 
     }, 
     plotOptions: { 
      column: { 
       pointPadding: 0.2, 
       borderWidth: 0 
      } 
     }, 
     series: [{ 
      name: 'S1', 
      data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5] 

     }, { 
      name: 'S2', 
      data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3] 

     }] 
    }); 
}); 

HTMLのCODE：ビジュアル

<div class="ao-demand-pagination"> 
            <a class="demand-pagination-btn btn-white" id="" href="javascript:void(0);"><i class="fa fa-step-backward"></i></a> 
            <a class="demand-pagination-btn btn-white" id="" href="javascript:void(0);"><i class="fa fa fa-chevron-left"></i></a> 
            <a class="demand-pagination-btn btn-white" id="" href="javascript:void(0);"><i class="fa fa fa-chevron-right"></i></a> 
            <a class="demand-pagination-btn btn-white" id="" href="javascript:void(0);"><i class="fa fa-step-forward"></i></a> 

           </div> 

ページネーション：

このページネーションを修正する私に助けてください。

Answer 1

setExtremesでこれを行うことができます。あなたはページごとにあなたの "ウインドウ"のパラメタリゼーションを設定し、各クリックで極端なものを更新します。 2つのコードセットで実行できます。あなたはその後、ページングを可能にするボタンの機能にロジックを適用

chart: { 
    events: { 
    load: function() { 
     this.xAxis[0].setExtremes(0, 5); 
    } 
    } 
}, 

2）：あなたのウィンドウを設定し、負荷チャートの「始まり」で

1）

var stepWidth = 5; 
    // the button action 
    $('#beginning').click(function() { 
    var chart = $('#container').highcharts(); 
    chart.xAxis[0].setExtremes(0, 5); 
    }); 

    $('#forward').click(function() { 
    var chart = $('#container').highcharts(); 
    var currentMin = chart.xAxis[0].getExtremes().min; 
    var currentMax = chart.xAxis[0].getExtremes().max; 

    chart.xAxis[0].setExtremes(currentMin + stepWidth, currentMax + stepWidth); 
    }); 

    $('#back').click(function() { 
    var chart = $('#container').highcharts(); 
    var currentMin = chart.xAxis[0].getExtremes().min; 
    var currentMax = chart.xAxis[0].getExtremes().max; 

    chart.xAxis[0].setExtremes(currentMin - stepWidth, currentMax - stepWidth); 
    }); 

    $('#ending').click(function() { 
    var chart = $('#container').highcharts(); 
    chart.xAxis[0].setExtremes(9, 11); 
    }); 

私はあなたの範囲から外れるのを防ぐロジックを追加しておきます。ここにはサンプルjsFiddleがあります。