使用Highcharts在柱形圖上應用分頁

我正在使用Highcharts繪製柱形圖（參見下圖）。使用Highcharts在柱形圖上應用分頁

到目前爲止，我能夠成功地繪製圖表，但我用分頁（下以前的按鈕）面臨的問題。

一個想法是在圖表正下方使用一個單獨的<div>元素，並編寫一個顯示按鈕的邏輯，但在我的要求中，我需要在圖表區域本身顯示下一個和上一個按鈕。

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

以下是繪製圖表的代碼 - 我有12類（1至12月），我想顯示（1至6月） - 在另一頁上一個頁面上和（月8月）。

$('#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); 
});

來源

2016-08-18 Ruhul

可能這個鏈接對您有所幫助HTTP：//的jsfiddle。 net/startsevdenis/xXP93/2/ – Ranjan

@ranjan系列名稱更改...所以必須定製工具提示才能使圖形可用。此外，對於4系列圖表，您現在需要4x系列的數量。我想說 - 想法 –

如果我理解正確的話，你可以使用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); 
    }) 
    }

當你將改變你X軸極端，你將能夠顯示您點上左鍵點擊了一半，並在右鍵單擊下半年。

你可以找到的選項我已經Highcharts API中使用： http://api.highcharts.com/highcharts

在這裏你可以找到一個例子是如何工作的： http://jsfiddle.net/1dtt1Lph/2/

來源

2016-08-18 10:05:23

謝謝你會試試這個，讓你知道:-) – Ruhul

@Grzegorz是否有可能修復它，所以極端是動態的而不是硬編碼值？ – Jake

嗨傑克，你能給我提供更具體的信息，你希望你的圖表工作嗎？ –

使用Highcharts在柱形圖上應用分頁

回答

相關問題