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 的值)；

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

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

• xAxis min 设置将确定 x 轴的比例，该比例将被列和可见的 plotBands。相应调整。

更新 fiddle :

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

输出: