Highcharts 允许您自定义图表的各个部分,包括 y 轴
Highcharts.chart('container', {
chart: {
type: 'candlestick'
},
title: {
text: 'Candlestick & Volume Chart'
},
xAxis: {
type: 'datetime'
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'Price'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'candlestick',
name: 'AAPL',
data: [
[1488297600000, 128.64, 129.12, 127.65, 128.84],
// ... more data
]
}, {
type: 'column',
name: 'Volume',
data: [
[1488297600000, 123456],
// ... more data
],
yAxis: 1
}]
});
在这个示例中,我们创建了一个具有两个 y 轴的图表。第一个 y 轴用于显示价格(Candlestick 图表),第二个 y 轴用于显示成交量(Volume 图表)。我们通过设置 height
和 top
属性来调整两个 y 轴的大小和位置。
领取专属 10元无门槛券
手把手带您无忧上云