未显示 Highstock 底部图表
Highstock bottom chart not shown
我使用的是官方 highstock 图表 demo to create something similar with 2 charts stacked on top of each other. The problem is that the bottom chart (volume) is not displayed jsfiddle
aapl-ohlc.json 文件的简要说明会有所帮助。
...
const data = JSON.parse(document.getElementById('ohlc-data').innerHTML);
// split the data set into ohlc and volume
const ohlc = data.map((a) => [a[0], a[1], a[2], a[3], a[4]])
const volume = data.map((a) => [a[0], a[5]])
// set the allowed units for data grouping
const groupingUnits = [
[
'week', // unit name
[1] // allowed multiples
],
[
'month', [1, 2, 3, 4, 6]
]
]
// create the chart
Highcharts.stockChart('container', {
legend: {
enabled: false
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
selected: 4,
inputEnabled: false
},
title: {
text: ''
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: ''
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: ''
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
tooltip: {
split: true
},
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}],
navigator: {
enabled: false
}
});
这一行:
const volume = data.map((a) => [a[0], a[5]])
指向一个不存在的元素。 a[5]
未定义(每个子数组只有五个元素,没有第六个元素),因此您的数据中没有 y
值,因此没有要显示的数据系列。
我不知道应该用什么数据元素表示体积,但仅供参考,只是为了证明它确实有效,这里是使用
更新的 fiddle
const volume = data.map((a) => [a[0], a[1]])
编辑:
请注意,在您基于 fiddle 的演示示例中,他们使用的文件是 aapl-ohlcv.json
,而不是 aapl-ohlc.json
,它实际上有第 6 个数据元素在每个子数组中。
我使用的是官方 highstock 图表 demo to create something similar with 2 charts stacked on top of each other. The problem is that the bottom chart (volume) is not displayed jsfiddle
aapl-ohlc.json 文件的简要说明会有所帮助。
...
const data = JSON.parse(document.getElementById('ohlc-data').innerHTML);
// split the data set into ohlc and volume
const ohlc = data.map((a) => [a[0], a[1], a[2], a[3], a[4]])
const volume = data.map((a) => [a[0], a[5]])
// set the allowed units for data grouping
const groupingUnits = [
[
'week', // unit name
[1] // allowed multiples
],
[
'month', [1, 2, 3, 4, 6]
]
]
// create the chart
Highcharts.stockChart('container', {
legend: {
enabled: false
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
selected: 4,
inputEnabled: false
},
title: {
text: ''
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: ''
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: ''
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
tooltip: {
split: true
},
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}],
navigator: {
enabled: false
}
});
这一行:
const volume = data.map((a) => [a[0], a[5]])
指向一个不存在的元素。 a[5]
未定义(每个子数组只有五个元素,没有第六个元素),因此您的数据中没有 y
值,因此没有要显示的数据系列。
我不知道应该用什么数据元素表示体积,但仅供参考,只是为了证明它确实有效,这里是使用
更新的 fiddleconst volume = data.map((a) => [a[0], a[1]])
编辑:
请注意,在您基于 fiddle 的演示示例中,他们使用的文件是 aapl-ohlcv.json
,而不是 aapl-ohlc.json
,它实际上有第 6 个数据元素在每个子数组中。