如何减少蜡烛之间的HighStock图表差距？

Question

我正在使用HighChart-HighStock的烛台图。我想缩小烛台之间的距离。在大范围变焦时还不错。但是当我将图表放大很多时，蜡烛之间的填充物使我很烦，因为它们之间的距离太宽。

我尝试将pointPadding中的plotOption&xAxis设置为0，但没有任何反应。我如何缩小这一差距？

放大的图表-烛台之间的间隙太宽

宽视角图-还不错

Highcharts.stockChart('container', {
  // title: { text: '---'},
  rangeSelector: {
    buttons: [
      // { type: 'hour', count: 1, text: '1h' },
      {
        type: 'day',
        count: 1,
        text: '1d'
      },
      // { type: 'all', count: 1, text: 'All' }
    ],
    selected: 1,
    //inputEnabled: true
  },
  xAxis: [{
    pointPadding: 0,
    type: 'datetime',

  }, {
    type: 'datetime',
  }],
  yAxis: [{
    labels: {
      align: 'right',
      x: -3
    },
    title: {
      text: 'OHLC'
    },
    height: '70%',
    lineWidth: 2,
    resize: {
      enabled: true
    }
  }, {
    labels: {
      align: 'right',
      x: -3
    },
    title: {
      text: 'Volume'
    },
    top: '75%',
    height: '25%',
    offset: 0,
    lineWidth: 2
  }],

  plotOptions: {
    candlestick: {
      pointPadding: 0,
      downColor: 'blue',
      upColor: 'red',
      dataGrouping: {
        enabled: false,
      }
    },
    line: {
      lineWidth: 1,
      states: {
        hover: {
          enabled: false
        }
      }
    }
  },

  series: [{
      name: 'ohlc',
      type: 'candlestick',
      data: chartData,
    },
    {
      name: 'avg5',
      type: 'line',
      data: avg5Data,
      color: '#FF0000',
    },
    {
      name: 'avg10',
      type: 'line',
      data: avg10Data,
      color: '#0C9B3A',
    },
    {
      name: 'avg20',
      type: 'line',
      data: avg20Data,
      color: '#FF9900',
    },
    {
      name: 'avg60',
      type: 'line',
      data: avg60Data,
      color: '#000000',
    },
    {
      name: 'vol',
      type: 'column',
      data: moneyData,
      yAxis: 1,
      color: '#0944a3',
      dataGrouping: {
        enabled: false,
      }
    }
  ],
});
}

Answer 1

您需要将series.pointPadding与series.groupPadding结合使用（等于零）才能达到预期的效果。这是示例：https://jsfiddle.net/ahxrk5zq/

    series: [{
        type: 'candlestick',
        name: 'AAPL Stock Price',
        data: data,
        groupPadding: 0,
        pointPadding: 0.04,
        dataGrouping: {
            units: [
                [
                    'week', // unit name
                    [1] // allowed multiples
                ], [
                    'month',
                    [1, 2, 3, 4, 6]
                ]
            ]
        }
    }]

API参考：

https://api.highcharts.com/highstock/series.candlestick.pointPadding

https://api.highcharts.com/highstock/series.candlestick.groupPadding