如何在 Highcharts 中的 bars/columns 之间创建常量 space？

Question

当我说 space 时，我的意思不仅是 bars/columns 之间的 space，而且是图表两侧之间的 space（y 轴和其他尺寸）。我在看这个例子

Highcharts.chart('container', {
  chart: {
    type: 'column',
  },

  plotOptions: {
    column: {
      stacking: 'normal',
      groupPadding: 0.3,
      pointPadding: 0,
      pointWidth: 20,
    }
  },
  series: [{
    data: [5, 3, 4]
  }, {
    data: [2, 2, 3]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>


<div id="container"></div>

如您所见，0-1 和 1-2 之间的间距相等，但 Y 轴与 0 和 2 之间的间距不等于图表右侧（另一侧） Y 轴）。 如何调整这些？我可以将它们设置为 Y 轴和 0 条之间的设置像素 padding/margin，并且与另一侧类似吗？

Answer 1

您可以使用 minPadding 和 maxPadding 属性，但它们的值是相对于轴的长度。

您还可以将 pointRange 定义为 2 并使用 tickPositions 或 tickPositioner:

更正刻度

plotOptions: {
    column: {
        stacking: 'normal',
        pointRange: 2,
        pointWidth: 20,
    }
},
xAxis: {
    maxPadding: 0,
    minPadding: 0,
    tickPositions: [0, 1, 2]
},

现场演示： http://jsfiddle.net/BlackLabel/2xdwuah9/

最后，您可以重置默认边距并为 x-axis:

指定 min 和 max

plotOptions: {
    column: {
        stacking: 'normal',
        pointRange: 0,
        pointWidth: 20,
    }
},
xAxis: {
    maxPadding: 0,
    minPadding: 0,
    min: -1,
    max: 3
},

现场演示： http://jsfiddle.net/BlackLabel/96pw12u0/

API参考：

https://api.highcharts.com/highcharts/xAxis.minPadding

https://api.highcharts.com/highcharts/series.column.pointRange

https://api.highcharts.com/highcharts/xAxis.tickPositioner

https://api.highcharts.com/highcharts/xAxis.min

如何在 Highcharts 中的 bars/columns 之间创建常量 space？

How to create constant space between bars/columns in Highcharts?

javascript

reactjs

highcharts