这是我的以下图表配置。我一直在做一些研究但是找不到启用垂直滚动条的任何帮助。
我知道我可以为图表容器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中启用垂直滚动条吗?
答案 0 :(得分:2)
http://www.highcharts.com/docs/chart-concepts/scrollbar
你可以设置一个固定的高度或宽度到图表并包装到div宽度overflow-x:auto,它不是一样的但至少是它。
答案 1 :(得分: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]
}]
});