하이 차트를 사용하여 기둥 형 차트에 페이지 매기기 적용

Question

하이 차트를 사용하여 기둥 형 차트 (아래 이미지 참조)를 그립니다.

지금까지, 나는 성공적 차트를 그릴 수 있어요,하지만 난 매김 (다음-이전 버튼) 문제를 직면하고있다.

하나의 아이디어는 내 차트 바로 아래에 별도의 <div> 요소를 사용하고 단추를 표시하는 논리를 작성하는 것입니다.하지만 제 요구 사항에서는 차트 영역 자체에 다음 및 이전 단추를 표시해야합니다.

<div id="chart-2" class="graph"></div> 
    <div id="buttons"></div> 

다음

는 차트를 그리는 코드입니다 - 내가 (1월에서 6월까지) 표시 할 - 다른 페이지에 한 페이지에와 (10 진수 팔월) - I 12 개 종류 (10 진수 월)을 가지고있다. 내가 제대로 이해하면

$('#chart-2').highcharts({ 
        chart :{ 
     backgroundColor: '#3f3b53', 
     type:'column' 
     }, 
     legend : { 
       symbolHeight : 8, 
       symbolWidth : 8, 
       symbolRadius : 4, 
       margin: 15, 
       backgroundColor: '#FFFFFF', 
       layout:'horizontal', 
       itemDistance:25, 

       symbolMargin:10, 
       itemStyle: { 
       color: 'black', 
       fontWeight: 'normal' 

      } 
      }, 
     title: { 
      text: '' 
     }, 
     xAxis: { 
      categories: [ 
       'JAN', 
       'FEB', 
       'MAR', 
       'APR', 
       'MAY', 
       'JUN', 
       'JUL', 
       'AUG', 
       'SEP', 
       'OCT', 
       'NOV', 
       'DEC' 
      ], 
     labels: { 
      style: { 
       color: '#FFFFFF' 
      } 
     } 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: '' 
      } 
     }, 
     tooltip: { 
     backgroundColor: '#FFFFFF', 
     borderColor: '#FFFFFF', 
     borderRadius: 0, 
     borderWidth: 5, 
     formatter: function() { 
      return ' <b>' + this.y + '</b><br><b>'+this.series.name+'</b>'; 
     } 
    }, 
     plotOptions: { 
      column: { 
       pointPadding: 0.2, 
       borderWidth: 0 
      } 
     }, 
     series: [{ 
      name: 'Physical Medicine', 

      color: '#0099ff', 
      data: [90, 80, 85, 70, 80, 50, 88, 85, 20, 30, 40, 50] 

     },{ 
      name: 'Phychiatry', 

      color: '#ff3399', 
      data: [80, 70, 85, 60, 50, 70, 38, 89, 70, 40, 20, 50] 

     },{ 
      name: 'Otrhopedic Surgery', 

      color: '#cc0000', 
      data: [88, 79, 81, 50, 40, 76, 31, 81, 65, 30, 29, 59] 

     },{ 
      name: 'Nephrology', 

      color: '#ff5c33', 
      data: [88, 89, 61, 60, 70, 36, 21, 51, 69, 39, 21, 51] 

     },{ 
      name: 'Cardiology', 

      color: '#ffa64d', 
      data: [18, 29, 31, 50, 40, 46, 81, 31, 89, 39, 81, 31] 

     },{ 
      name: 'General Surgery', 

      color: '#ffe066', 
      data: [28, 59, 61, 59, 49, 41, 31, 41, 81, 31, 87, 38] 

     },{ 
      name: 'General Practise', 

      color: '#a64dff', 
      data: [78, 69, 41, 89, 29, 81, 21, 11, 41, 35, 92, 89] 

     },{ 
      name: 'Pulmanory Diesease', 

      color: '#0066ff', 
      data: [58, 39, 49, 89, 39, 61, 25, 45, 23, 76, 42, 89] 

     }] 
       }, function(chart) { // on complete 

    //chart.renderer.button("abc", 100, 100, function() {}, {}, {}, {}).add(); 
    chart.renderer.button('Reset zoom', null, null, chart.resetZoom, { 
    zIndex: 20 
}).attr({ 
    align: 'right', 
    title: 'Reset zoom level 1:1' 
}).add(chart.zoomGroupButton).align({ 
    align: 'right', 
    x: -10, 
    y: 10 
}, false, null); 
}); 

Answer 1

, 당신은 당신의 x 축의 극치를 변경할 것, 차트에 새로운 버튼을 추가 chart.renderer.button를 사용할 수 있습니다. 당신은 x 축 극단을 바꿀 때

function(chart) { // on complete 
    chart.renderer.button('<', chart.plotLeft - 60, chart.plotHeight + chart.plotTop).addClass('left').add(); 


    chart.renderer.button('>', chart.plotLeft + chart.plotWidth + 30, chart.plotHeight + chart.plotTop).addClass('right').add(); 

    $('.left').click(function() { 
     chart.xAxis[0].setExtremes(0, 5); 
    }); 
    $('.right').click(function() { 
     chart.xAxis[0].setExtremes(6, 11); 
    }) 
    } 

하면 왼쪽 버튼 클릭에 대한 귀하의 포인트의 절반, 마우스 오른쪽 버튼 클릭의 두 번째 절반을 보여줄 수있을 것입니다. http://api.highcharts.com/highcharts

을 그리고 여기 당신이 그것을 작동하는 방법을 예를 찾을 수 있습니다 :

당신은 내가 Highcharts API에서 사용한 옵션을 찾을 수 있습니다 http://jsfiddle.net/1dtt1Lph/2/