Question

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

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

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

  <div id="chart-2" class="graph"></div>
    <div id="buttons"></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);
});

Answer 1

如果我理解正确，您可以使用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/

Answer 2

但是，“接受的答案”在1月到12月是正确的。如果存在一些不同的情况，则以上代码将仅显示两个屏幕。我对接受的答案进行了一些自定义，希望它一定能帮助其他人适应不同的场景。

function (chart) {
    var x=6;
    var max_plot=12;

    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() {
        if (x < 0) {
            x = 0;
        } else {
            console.log('fsafg');
            chart.xAxis[0].setExtremes(x-6, x-1);
            x=x-6;
        }
    });

    $('.right').click(function() {
        if (x > max_plot) {
            x = max_plot;
        } else {
            chart.xAxis[0].setExtremes(x+1, x+6);
            x=x+6;
        }
    });
}

使用Highcharts在柱形图上应用分页

2 个答案: