使用Highcharts在柱形图上应用分页(Apply pagination on column chart using Highcharts)

我正在使用Highcharts绘制柱形图（见下图）。

到目前为止，我已成功绘制图表，但我面临分页问题（下一个按钮）。

一个想法是在我的图表下面使用一个单独的<div>元素并编写一个逻辑来显示按钮，但在我的要求中，我需要在图表区域中显示下一个和上一个按钮。

以下是绘制图表的代码 - 我有12个类别（1月 - 12月），我想在一个页面上显示（1月 - 6月），在另一个页面上显示（8月 - 12月）。

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

I am drawing a column chart (see image below) using Highcharts.

So far, I am successfully able to draw the chart, but I'm facing issues with pagination (next-previous buttons).

One idea would be to use a separate <div> element just below my chart and write a logic to show buttons, but in my requirements, I need to show the next and previous buttons in the chart area itself.

The following is the code to draw a chart - I have 12 categories (Jan - Dec), I want to display (Jan - Jun) on one page and (Aug - Dec) on another page.

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

最满意答案

如果我理解正确，您可以使用chart.renderer.button向图表添加新按钮，这将改变xAxis的极限。

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

当您改变xAxis极限时，您将能够在左键单击时显示一半的点，并在右键单击时显示后半部分。

您可以在Highcharts API中找到我使用的选项： http ： //api.highcharts.com/highcharts

在这里你可以找到一个如何工作的例子： http ： //jsfiddle.net/1dtt1Lph/2/

If I understand you correctly, you can use chart.renderer.button for adding new buttons to your chart, that will change the extremes of your xAxis.

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

When you will change you xAxis extremes you will be able to show the half of your points on left button click, and the second half on right button click.

You can find options I have used in Highcharts API: http://api.highcharts.com/highcharts

And here you can find an example how it can work: http://jsfiddle.net/1dtt1Lph/2/

更多推荐