在Highcharts中，如何在柱形图中设置y轴上的绘图带宽度？

Question

是否有一种智能的方法来调整y轴上的绘图带并将其与x轴列对齐？大小似乎使用x轴的宽度。

JSFiddle演示：https://jsfiddle.net/remisture/hvy162k5/13/

我正在尝试在列的左侧创建情节带，如下所示：https://jsfiddle.net/remisture/hvy162k5/12/ - 我基本上将.chart-column宽度设置得足够小以“假”它，但这因浏览器而异，所以我需要找到更好的解决方案。

PlotBand对象的thickness属性似乎对我没有帮助。

plotBands: [{
    from: 0,
    to: 2500,
    color: '#FB8585'
  }, {
    from: 2500,
    to: 5500,
    color: '#F9E7AE'
  }, {
    from: 5500,
    to: 8000,
    color: '#83DAD9'
  }]

就是这样

这就是我喜欢的方式

Answer 1

我会使用xAxis缩放，pointRange，pointPadding / groupPadding

进行此操作

这样的事情：

plotOptions: {
  series: {
    borderWidth: 0,
    pointRange: 1,
    pointPadding: 0,
    groupPadding: 0
  }
},
xAxis: {
  min: -0.5,
  max: 0,
  minPadding: 0,
  maxPadding: 0,
  visible: false,
}

• 将pointRange设置为1，使列填充一个轴单位的宽度（这样可以使所有内容正确缩放）;

• 将pointPadding和groupPadding设置为0以从列绘图中删除不必要的空间;

• 将轴minPadding和maxPadding设置为0以从轴上移除不必要的空间;

• 将xAxis min设置为小于0，将max设置为0，以便为左侧显示的波段留出空间（将其显示在右侧，将min设置为0，最大值大于0）;

这样，您可以将图表宽度设置为您想要的任何值，并且列/波段应该适当填充。

• 要使可见波段的部分更窄，请将x轴min设置为接近零的值（例如-0.25） - 为了使它们更宽，将min设置为从零开始更远（例如{ {1}}）。

• -0.75 xAxis设置将确定列和可见min将占用的x轴的比例。相应调整。

更新小提琴：

• https://jsfiddle.net/jlbriggs/hvy162k5/16/

<强>输出：