highcharts中的水平滾動條

Question

我想讓水平滾動條在我的highcharts圖表中工作。儘管水平滾動條出現，但沒有可滾動的空間。該圖實際上變得更小以能夠容納所有數據。

Here是的jsfiddle代碼

var colors = Highcharts.getOptions().colors; 

chart = new Highcharts.Chart({ 
chart: { 
    renderTo: 'container', 
    type: 'column' 

}, 

xAxis: { 
    categories: ["CCD Oberon Mall","CCD Gold S", 
       "Barista Coffee Shop Indra Nagar", 
       "Dominos Pizza Delhi MG Road"], 
    title: { 
     enabled: true, 
     margin: 15 
    }, 
    labels: { 
     rotation: -90, 
     align: 'right', 
     style: { 
      fontSize: '13px', 
      fontFamily: 'Verdana, sans-serif' 
     } 
    } 
}, 
scrollbar: { 
    enabled: true 
}, 
yAxis: [{ 
    title: { 
     text: 'Age Count' 
    }, 
    stackLabels: { 
     enabled: true, 
     style: { 
      fontWeight: 'bold', 
      color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
     } 
    } 
}, { // Secondary yAxis 
    title: { 
     text: 'Gender Count' 
    }, 
    stackLabels: { 
     enabled: true, 
     style: { 
      fontWeight: 'bold', 
      color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
     } 
    }, 
    opposite: true 
}], 
legend: { 
    align: 'center', 
    //x: -100, 
    verticalAlign: 'top', 
    //y: 20, 
    floating: true, 
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white', 
    borderColor: '#CCC', 
    borderWidth: 1, 
    shadow: false 
}, 
tooltip: { 
    formatter: function() { 
     return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>'; //+ 
     //'Total: '+ this.point.stackTotal; 
    } 
}, 
plotOptions: { 
    column: { 
     stacking: 'normal', 
     point: { 
      events: { 
       click: function() { 
        console.log('this.x,y=' + this.x + "," + this.y + " category=" + this.category); 

       } 
      } 
     }, 
     dataLabels: { 
      enabled: true, 
      color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' 
     } 
    } 
}, 
series: [{ 
    type: 'column', 
    name: 'Female', 
    data: [44,4,10,10], 
    stack: 'Female' 
}, { 
    type: 'column', 
    name: 'Male', 
    data: [30,0,0,10], 
    stack: 'Male' 
}, { 
    type: 'column', 
    name: 'Under 18', 
    data: [0,0,0,0], 
    yAxis: 1, 
    stack: 'Under18' 
}, { 
    type: 'column', 
    name: '18 To 24', 
    data: [0,0,0,0], 
    yAxis: 1, 
    stack: '18To24' 
}, { 
    type: 'column', 
    name: '25 To 34', 
    data: [54,4,10,20], 
    yAxis: 1, 
    stack: '25To34' 
}, { 
    type: 'column', 
    name: 'Above 34', 
    data: [20,0,0,3], 
    yAxis: 1, 
    stack: 'Above34' 
}] 
}); 

Answer 1

您需要設置最小值/最大值，即

min:0, 
max: 2 // 2 categories on xAxis will be displayed 

http://jsfiddle.net/2K8uW/2/