javascript - 在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，以便为 strip 在左侧显示留出空间(若要在右侧显示，请设置最小值为 0，最大值为大于 0 的值)；

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

• 要使可见带部分更窄，请将 x 轴 min 设置为更接近零的值(例如 -0.25) - 要使可见带部分更宽，请将 min 设置为更远离零的值零(例如-0.75)。

• xAxis min 设置将确定列和可见的 plotBands< 所占的 x 轴比例。相应调整。

更新 fiddle :

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

输出: