如何使高级图表在列范围内垂直滚动

时间:2016-10-02 12:44:22

标签: highcharts

我想让列范围图表可以垂直滚动。滚动条:{enabled:true}似乎不起作用。 我的目标是展示最少:10个类别。通过向下滚动图表可以看到其余部分。

这是我的小提琴:http://jsfiddle.net/ttrtb6xt/2/

$(function() {

$('#container').highcharts({

    chart: {
        type: 'columnrange',
        inverted: true,

    },

    xAxis: {
        categories: ["Bulk Order Submission","CAD","CiteAb","DDF Order Management","EB-eye","Enterprise Asset Manager","Enterprise Search","False EAMS - Enterprise Architecture Management System","Funnelback","GenieKnows","Giga EAMS - Enterprise Architecture Management System","Google Maps","Google SOAP Search","GoPubMed","Hieroglyphs EAMS - Enterprise Architecture Management System","I Y I","IAM - Identity & Access Management","in","de","Jumper 2.0","LANDesk Management","LIMS 2010","LIMS 2016","Master Data Management System","Monster.com","MuleSoft ESB","Nextbio","Office 365","Oracle Peoplesoft HR","Order Tracking Portfolio","Q-Sensei Enterprise Search","Quertle","salesforce.com","SAP Finance","SAP HR","SCM - Supply Chain Manager","ServiceNow","Strategic Information System","TeraText Suite","Test App 1","Test App 1","Test App 2","Test App","Testing L","UP","Academy","International"],
        min: 5,
        scrollbar: {
            enabled: true
        },

    },

    yAxis: {
        type: 'datetime',
        tickInterval: 1000 * 60 * 60 * 24 * 30 * 6,
        plotLines: [{
            color: 'red', // Color value
            dashStyle: 'Solid', // Style of the plot line. Default to solid
            value: [1411344000000], // Value of where the line will appear
            width: 3, // Width of the line  
            zIndex: 4,
            label: {
                text: 'Current Date',
            },
        }],

    },


    plotOptions: {
        series: {
            grouping: false,
            stacking: 'normal',
            pointPadding: 0,
            groupPadding: 0.0,
            allowPointSelect: true,
            dataLabels: {
                enabled: true,
                align: 'center',
                x: -10,
                formatter: function() {
                    return this.series.name;
                }
            }
        }
    },
    tooltip: {
        formatter: function() {
            var x = this.x,
            low = this.point.low,
            high = this.point.high,
            duration = high - low;
            return x + ':<br> start: ' + new Date(low).toDateString() + '<br> end: ' + new Date(high).toDateString() + '<br> duration: ' + duration / (1000 * 60 * 60 * 24) + ' days';
        }
    },


    legend: {
        enabled: false
    },

    series: [{"color":"#dedede","data":[[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000],[1411344000000,1436918400000]],"name":"Planning"},{"color":"#34d440","data":[[1436918400000,1531612800000],[1436918400000,1475020800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000],[1436918400000,1531612800000]],"name":"Standard"},{"color":"#ffd440","data":[[],[1475020800000,1474761600000],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]],"name":"Expiring"},{"color":"#ff34f4","data":[[],[1474761600000,1569369600000],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]],"name":"Exception"}]

});

});

0 个答案:

没有答案