如何在Highcharts中啓用垂直滾動條？

Question

這是我的以下圖表配置。我一直在做一些研究，但找不到任何幫助來啓用垂直滾動條。

我知道我可以爲圖表容器div設置overflow-y屬性，但要實現凍結的X軸，我需要在不是容器的系列上進行垂直滾動。

$(function() { 
$('#container').highcharts({ 
    chart: { 
     type: 'bar' 
    }, 
    title: { 
     text: 'Stacked bar chart' 
    }, 
    xAxis: { 
     categories: ['CITY1', 'CITY2','CITY3','CITY4'], 
      minorTickLength: 0, 
      tickLength: 0, 
      lineWidth: 0, 
      tickwidth: 0, 

    }, 
    yAxis: { 
     max: 100, 
     tickInterval: 25, 
     title: { 
      text: 'Total fruit consumption' 
     } 
    }, 
    legend: { 
     reversed: true 
    }, 
    plotOptions: { 
     series: { 
      grouping: false, 
      stacking: 'normal' 
     } 
    }, 
    scrollbar: { 
    enabled: true 
}, 
    series: [{ 
     name: 'Q1', 
     data: [50, 70,0,35] 
    }, { 
    name: 'Q2', 
     data: [20, 0,50,0] 
    }, { 
     name: 'Q3', 
     data: [0, 0,40,20] 
    },{ 
     name: 'Q4', 
     data: [0, 30,0,20] 
    }] 
    }); 
     }); 

任何人都可以建議我如何啓用垂直滾動條在Highcharts？

Answer 1

試試這個小提琴：http://jsfiddle.net/fj6d2/3076/

這可能會幫助你。

var chart = new Highcharts.Chart({ 

chart: { 
    renderTo: 'container', 
    type:'bar', 
}, 

xAxis: { 
    categories: ['CITY1', 'CITY2','CITY3','CITY4'], 
    min:2, 
}, 
yAxis: { 
      title: { 
     text: 'Total fruit consumption' 
    }, 
}, 
plotOptions: { 
    series: { 
     grouping: false, 
     stacking: 'normal' 
    } 
}, 
legend: { 
    verticalAlign: 'top', 
    y: 100, 
    align: 'right' 
}, 

scrollbar: { 
    enabled: true 
}, 

series: [{ 
    name: 'Q1', 
    data: [50, 70,0,35] 
}, { 
    name: 'Q2', 
    data: [20, 0,50,0] 
}, { 
    name: 'Q3', 
    data: [0, 0,40,20] 
},{ 
    name: 'Q4', 
    data: [0, 30,0,20] 
}] 
}); 

Answer 2

@Swetha：那個小提琴使用Highstock庫。 Highcharts不支持滾動條。滾動條Highstock只有

http://www.highcharts.com/docs/chart-concepts/scrollbar

你可以一個固定的高度或寬度設置爲圖表，幷包裝成一個div寬度溢出-X：汽車，這是不一樣的，但它至少是後話。