仅将 HighChart yAxis 的最小最大值设置为特定系列
Set HighChart yAxis's min max to a specific series only
我有一个股票价格烛台系列和一个与烛台系列共享 yAxis 的线系列。默认情况下,API 自动将图表的 y 轴范围设置为两个系列 min/max(烛台系列、线系列)
的 min/max
但我想展示烛台系列比折线图更重要。因此,图表的 yAxis min/max 应该仅限于烛台系列,即使它切断了线系列。
并且y轴min/max应该在图表动态滚动时调整。
我该怎么做?
var chartData = [
[1473687000000, 102.65, 105.72, 102.53, 105.44],
[1473773400000, 107.51, 108.79, 107.24, 107.95],
[1473859800000, 108.73, 113.03, 108.6, 111.77],
[1473946200000, 113.86, 115.73, 113.49, 115.57]
];
var avgData = [
[1473687000000, 250],
[1473773400000, 300],
[1473859800000, 280],
[1473946200000, 290]
];
$(function() {
Highcharts.stockChart('container', {
// title: {text: '---'},
rangeSelector: {
buttons: [
// { type: 'hour', count: 1, text: '1h' },
{ type: 'day', count: 1, text: '1d' },
// { type: 'all', count: 1, text: 'All' }
],
selected: 1,
//inputEnabled: true
},
xAxis: [{
type: 'datetime',
}],
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {text: 'OHLC'},
height: '100%',
lineWidth: 2,
resize: {
enabled: true
}
}],
plotOptions: {
candlestick: {
downColor: 'blue',
upColor: 'red',
dataGrouping: {
enabled: false,
}
}
},
series: [{
name: 'ohlc',
type: 'candlestick',
data: chartData,
}, {
name: 'avg',
type: 'line',
data: avgData,
}]
});
});
dic#container {height: 100%; width: 100%;}
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//code.highcharts.com/stock/highstock.js"></script>
<script src="//code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="//code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container"></div>
在 'afterDrawChartBox' 事件中,您可以使用 setExtremes
方法和 candlestick
系列的最小值和最大值:
Highcharts.addEvent(Highcharts.Chart, 'afterDrawChartBox', function(e) {
var candlestick = this.series[0];
this.yAxis[0].setExtremes(candlestick.dataMin, candlestick.dataMax, true, false);
});
现场演示:https://jsfiddle.net/BlackLabel/520km1wv/
API参考:https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
我有一个股票价格烛台系列和一个与烛台系列共享 yAxis 的线系列。默认情况下,API 自动将图表的 y 轴范围设置为两个系列 min/max(烛台系列、线系列)
的 min/max但我想展示烛台系列比折线图更重要。因此,图表的 yAxis min/max 应该仅限于烛台系列,即使它切断了线系列。
并且y轴min/max应该在图表动态滚动时调整。
我该怎么做?
var chartData = [
[1473687000000, 102.65, 105.72, 102.53, 105.44],
[1473773400000, 107.51, 108.79, 107.24, 107.95],
[1473859800000, 108.73, 113.03, 108.6, 111.77],
[1473946200000, 113.86, 115.73, 113.49, 115.57]
];
var avgData = [
[1473687000000, 250],
[1473773400000, 300],
[1473859800000, 280],
[1473946200000, 290]
];
$(function() {
Highcharts.stockChart('container', {
// title: {text: '---'},
rangeSelector: {
buttons: [
// { type: 'hour', count: 1, text: '1h' },
{ type: 'day', count: 1, text: '1d' },
// { type: 'all', count: 1, text: 'All' }
],
selected: 1,
//inputEnabled: true
},
xAxis: [{
type: 'datetime',
}],
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {text: 'OHLC'},
height: '100%',
lineWidth: 2,
resize: {
enabled: true
}
}],
plotOptions: {
candlestick: {
downColor: 'blue',
upColor: 'red',
dataGrouping: {
enabled: false,
}
}
},
series: [{
name: 'ohlc',
type: 'candlestick',
data: chartData,
}, {
name: 'avg',
type: 'line',
data: avgData,
}]
});
});
dic#container {height: 100%; width: 100%;}
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//code.highcharts.com/stock/highstock.js"></script>
<script src="//code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="//code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container"></div>
在 'afterDrawChartBox' 事件中,您可以使用 setExtremes
方法和 candlestick
系列的最小值和最大值:
Highcharts.addEvent(Highcharts.Chart, 'afterDrawChartBox', function(e) {
var candlestick = this.series[0];
this.yAxis[0].setExtremes(candlestick.dataMin, candlestick.dataMax, true, false);
});
现场演示:https://jsfiddle.net/BlackLabel/520km1wv/
API参考:https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes