Highcharts 中文社区

 找回密码
 立即注册
查看: 530|回复: 1

[已解决] 如何设置 stock 图表的高度?

[复制链接]

该用户从未签到

5

主题

20

帖子

100

积分

HC 新手

Rank: 1

积分
100
发表于 2017-6-12 16:14:50 | 显示全部楼层 |阅读模式
像下图中四个图表,非常紧凑,我曾尝试设置 yAxis 的 height 参数,图标是缩短了,但辅助线还是在原来的位置。我希望高度可以控制。 屏幕快照 2017-06-12 16.06.39.png


我修改后的效果:

屏幕快照 2017-06-12 16.11.46.png

代码:

  1. $(function () {
  2.     Highcharts.setOptions({
  3.         lang: {
  4.             rangeSelectorZoom: ''
  5.         }
  6.     });
  7.     $.getJSON('https://data.jianshukeji.com/jsonp?filename=json/aapl-ohlcv.json&callback=?', function (data) {
  8.         var ohlc = [],
  9.             volume = [],
  10.             dataLength = data.length,
  11.             // set the allowed units for data grouping
  12.             groupingUnits = [[
  13.                 'week',                         // unit name
  14.                 [1]                             // allowed multiples
  15.             ], [
  16.                 'month',
  17.                 [1, 2, 3, 4, 6]
  18.             ]],
  19.             i = 0;
  20.         for (i; i < dataLength; i += 1) {
  21.             ohlc.push([
  22.                 data[i][0], // the date
  23.                 data[i][1], // open
  24.                 data[i][2], // high
  25.                 data[i][3], // low
  26.                 data[i][4] // close
  27.             ]);
  28.             volume.push([
  29.                 data[i][0], // the date
  30.                 data[i][5] // the volume
  31.             ]);
  32.         }
  33.         // create the chart
  34.         $('#container').highcharts('StockChart', {
  35.             rangeSelector: {
  36.                 enabled: false
  37.             },
  38.             xAxis: {
  39.                 dateTimeLabelFormats: {
  40.                     millisecond: '%H:%M:%S.%L',
  41.                     second: '%H:%M:%S',
  42.                     minute: '%H:%M',
  43.                     hour: '%H:%M',
  44.                     day: '%m-%d',
  45.                     week: '%m-%d',
  46.                     month: '%y-%m',
  47.                     year: '%Y'
  48.                 }
  49.             },
  50.             yAxis: [{
  51.                 labels: {
  52.                     align: 'right',
  53.                     x: -3
  54.                 },
  55.                 height: '30%',
  56.                 lineWidth: 2
  57.             }, {
  58.                 labels: {
  59.                     align: 'right',
  60.                     x: -3
  61.                 },
  62.                 top: '30%',
  63.                 height: '35%',
  64.                 offset: 0,
  65.                 lineWidth: 2
  66.             }],
  67.             series: [{
  68.                 type: 'line',
  69.                 name: 'AAPL',
  70.                 data: ohlc,
  71.                 dataGrouping: {
  72.                     units: groupingUnits
  73.                 }
  74.             }, {
  75.                 type: 'column',
  76.                 name: 'Volume',
  77.                 data: volume,
  78.                 yAxis: 1,
  79.                 dataGrouping: {
  80.                     units: groupingUnits
  81.                 }
  82.             }],
  83.             scrollbar: {
  84.                 enabled: false
  85.             },
  86.             navigator: {
  87.                 enabled: false
  88.             }
  89.         });
  90.     });
  91. });
复制代码



本帖被以下淘专辑推荐:

该用户从未签到

5

主题

20

帖子

100

积分

HC 新手

Rank: 1

积分
100
 楼主| 发表于 2017-6-18 00:45:03 | 显示全部楼层
问题已经解决,配置 chart 中的 height 即可设定高度。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

快速回复 返回顶部 返回列表