时间戳

首页 > 解决方案 > 如何减少蜡烛之间的 HighStock 图表差距？

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

问题描述

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

我尝试设置to ，但什么pointPadding也没发生。我怎样才能缩小这个差距？plotOption&xAxis0

缩放图表 - 烛台之间的差距过大

在此处输入图像描述

宽视图图表 - 还不错

在此处输入图像描述

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,
      }
    }
  ],
});
}

标签： javascripthighcharts

解决方案

您需要设置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

推荐阅读