导航器highstocks后删除额外的空间/边距

Question

我在我的应用程序中使用highstocks，我有以下高库存图表选项。

   rangeSelector: {
        enabled: false
      },
      scrollbar: {
        enabled: false
      },
      title: {
        text: 'Dummy Data Set'
      },
      credits: {
        enabled: false
      },
      series: [{
        tooltip: {
          valueDecimals: 2
        },
        name: 'AAPL',
        data: [
          ...
        ]
      }]

HTML模板是这样的

<div style="border: 1px black solid" class='container'></div>

我得到一个ohlc股票图表，但在导航器后底部有额外的空间/边距。

有没有办法删除额外的空间/边距。

Answer 1

您可以通过设置适当的chart.spacingBottom值来控制图表底边和内容之间的空间。

码：

Highcharts.stockChart('container', {
  chart: {
    spacingBottom: 5
  },
  credits: {
    enabled: false
  },
  rangeSelector: {
    selected: 1
  },
  title: {
    text: 'AAPL Stock Price'
  },
  series: [{
    name: 'AAPL',
    data: [
      [1539264600000, 214.45],
      [1539351000000, 222.11],
      [1539610200000, 217.36],
      [1539696600000, 222.15],
      [1539783000000, 221.19],
      [1539869400000, 216.02],
      [1539955800000, 219.31],
      [1540215000000, 220.65],
      [1540301400000, 222.73],
      [1540387800000, 215.09],
      [1540474200000, 219.8],
      [1540560600000, 216.3],
      [1540819800000, 212.24],
      [1540906200000, 213.3],
      [1540992600000, 218.86],
      [1541079000000, 222.22],
      [1541165400000, 207.48],
      [1541428200000, 201.59],
      [1541514600000, 203.77],
      [1541601000000, 209.95],
      [1541687400000, 208.49],
      [1541773800000, 204.47],
      [1542033000000, 194.17],
      [1542119400000, 192.23],
      [1542205800000, 186.8]
    ],
    tooltip: {
      valueDecimals: 2
    }
  }]
});

#container {
  border: 1px solid red;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

演示：

• https://jsfiddle.net/BlackLabel/krgxL7dv/1/

API参考：

• https://api.highcharts.com/highstock/chart.spacingBottom