|
像下图中四个图表,非常紧凑,我曾尝试设置 yAxis 的 height 参数,图标是缩短了,但辅助线还是在原来的位置。我希望高度可以控制。
我修改后的效果:
代码:
- $(function () {
- Highcharts.setOptions({
- lang: {
- rangeSelectorZoom: ''
- }
- });
- $.getJSON('https://data.jianshukeji.com/jsonp?filename=json/aapl-ohlcv.json&callback=?', function (data) {
- var ohlc = [],
- volume = [],
- dataLength = data.length,
- // set the allowed units for data grouping
- groupingUnits = [[
- 'week', // unit name
- [1] // allowed multiples
- ], [
- 'month',
- [1, 2, 3, 4, 6]
- ]],
- i = 0;
- for (i; i < dataLength; i += 1) {
- ohlc.push([
- data[i][0], // the date
- data[i][1], // open
- data[i][2], // high
- data[i][3], // low
- data[i][4] // close
- ]);
- volume.push([
- data[i][0], // the date
- data[i][5] // the volume
- ]);
- }
- // create the chart
- $('#container').highcharts('StockChart', {
- rangeSelector: {
- enabled: false
- },
- xAxis: {
- dateTimeLabelFormats: {
- millisecond: '%H:%M:%S.%L',
- second: '%H:%M:%S',
- minute: '%H:%M',
- hour: '%H:%M',
- day: '%m-%d',
- week: '%m-%d',
- month: '%y-%m',
- year: '%Y'
- }
- },
- yAxis: [{
- labels: {
- align: 'right',
- x: -3
- },
- height: '30%',
- lineWidth: 2
- }, {
- labels: {
- align: 'right',
- x: -3
- },
- top: '30%',
- height: '35%',
- offset: 0,
- lineWidth: 2
- }],
- series: [{
- type: 'line',
- name: 'AAPL',
- data: ohlc,
- dataGrouping: {
- units: groupingUnits
- }
- }, {
- type: 'column',
- name: 'Volume',
- data: volume,
- yAxis: 1,
- dataGrouping: {
- units: groupingUnits
- }
- }],
- scrollbar: {
- enabled: false
- },
- navigator: {
- enabled: false
- }
- });
- });
- });
复制代码
|
|