Разбиение страниц в столбчатой ​​диаграмме с помощью Previous, Next controls?

Question

Я создал колонку Highchart, и мне нужно создать для нее разбивку на страницы.

Как я могу достичь разбиения на страницы с помощью переднего, заднего, следующего, предыдущих элементов управления?

У меня есть столбец кода диаграммы, как показано ниже,

$(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 код:

<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> 

PAGINATION Визуальная:

пожалуйста, помогите мне исправить эту нумерацию.

Answer 1

Это можно сделать с помощью setExtremes. Вы настраиваете параметризацию для своего «окна» на странице и обновляете крайности при каждом нажатии. Можно сделать в 2 основных наборах кода.

1) При загрузке вы установите окно "начало" диаграммы:

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

2) Затем можно применить логику к функциям кнопок, чтобы для пейджинга:

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); 
    }); 

I оставляйте добавление в логике, чтобы не допустить выхода из диапазона. Вот пример jsFiddle.