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

@Swetha：那个小提琴正在使用Highstock库。 Highcharts不支持滚动条。滚动条仅限Highstock

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

你可以设置一个固定的高度或宽度到图表并包装到div宽度overflow-x：auto，它不是一样的但至少是它。

Answer 2

试试这个小提琴：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]
}]
});

如何在Highcharts中启用垂直滚动条？

2 个答案: