是否可以禁用navigator(小编)但仍然是可扩展的滚动条,Highstock
Is it possible to disable navigator(small series) but remains the extensible scroll bar,Highstock
我需要保留可扩展滚动条的功能,但不需要概览导航器。喜欢:
我需要滚动条(区域 1)仍然可扩展,但移除导航器(区域 2)。
这是我想要的设计:
demo 您可以从 :
快速修改
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
var chart = $('#container').highcharts('StockChart', {
rangeSelector : {
enabled: false
},
title: {
text: null
},
navigator: {
enabled:false,//make it false , but the scroll bar is not extensible
outlineWidth: 0
},
scrollbar: {
barBackgroundColor: '#ccc',
barBorderWidth: 0,
buttonBackgroundColor: '#ccc',
buttonBorderWidth: 0,
buttonArrowColor: '#fff',
buttonBorderRadius: 3,
rifleColor: '#fff',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: '#ccc',
trackBorderRadius: 3
},
series: [{
type:'areaspline',
showInLegend: false,
name: 'AAPL1',
data: data
},{
type:'areaspline',
showInLegend: false,
name: 'AAPL2',
data: data.map(function(d){return [d[0],parseInt(d[1])*2 ]})
}]
});
});
});
Scrollbar 不能像 Navigator 那样调整大小,所以我认为您真正想要使用的是 (2) Navigator 并禁用 (1) Scrollbar。这是一个简单的例子:http://jsfiddle.net/dJbZT/183/
navigator: {
enabled:true,
outlineWidth: 0,
height: 14,
maskFill: '#cccccc',
series: {
data: [] // empty navigator
},
xAxis: {
labels: {
y: -20 // move labels outside the navigator
}
}
},
如果导航器应该有背景,可以为系列添加两个虚拟点,一个在原始系列的开头,一个在结尾:
data: [
[data[0][0], 2],
[data[data.length - 1][0], 2]
]
然后只需将系列的颜色和填充透明度设置为您想要实现的颜色,并将 yAxis.max
设置为低于您的虚拟值(在我的例子中为 2
)。工作演示:http://jsfiddle.net/dJbZT/184/
我需要保留可扩展滚动条的功能,但不需要概览导航器。喜欢:
我需要滚动条(区域 1)仍然可扩展,但移除导航器(区域 2)。
这是我想要的设计:
demo 您可以从 :
快速修改$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
var chart = $('#container').highcharts('StockChart', {
rangeSelector : {
enabled: false
},
title: {
text: null
},
navigator: {
enabled:false,//make it false , but the scroll bar is not extensible
outlineWidth: 0
},
scrollbar: {
barBackgroundColor: '#ccc',
barBorderWidth: 0,
buttonBackgroundColor: '#ccc',
buttonBorderWidth: 0,
buttonArrowColor: '#fff',
buttonBorderRadius: 3,
rifleColor: '#fff',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: '#ccc',
trackBorderRadius: 3
},
series: [{
type:'areaspline',
showInLegend: false,
name: 'AAPL1',
data: data
},{
type:'areaspline',
showInLegend: false,
name: 'AAPL2',
data: data.map(function(d){return [d[0],parseInt(d[1])*2 ]})
}]
});
});
});
Scrollbar 不能像 Navigator 那样调整大小,所以我认为您真正想要使用的是 (2) Navigator 并禁用 (1) Scrollbar。这是一个简单的例子:http://jsfiddle.net/dJbZT/183/
navigator: {
enabled:true,
outlineWidth: 0,
height: 14,
maskFill: '#cccccc',
series: {
data: [] // empty navigator
},
xAxis: {
labels: {
y: -20 // move labels outside the navigator
}
}
},
如果导航器应该有背景,可以为系列添加两个虚拟点,一个在原始系列的开头,一个在结尾:
data: [
[data[0][0], 2],
[data[data.length - 1][0], 2]
]
然后只需将系列的颜色和填充透明度设置为您想要实现的颜色,并将 yAxis.max
设置为低于您的虚拟值(在我的例子中为 2
)。工作演示:http://jsfiddle.net/dJbZT/184/