是否有一种明智的方法来确定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'
  }]


就是这样

javascript - 在Highcharts中,如何在柱形图中的y轴上设置绘图带的宽度?-LMLPHP

这就是我喜欢的样子

javascript - 在Highcharts中,如何在柱形图中的y轴上设置绘图带的宽度?-LMLPHP

最佳答案

我会使用xAxis缩放比例,pointRangepointPadding / 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,以使该列填充一个轴单位的宽度(这将使所有内容正确缩放);
pointPaddinggroupPadding设置为0可从列图中删除不必要的空间;
将轴minPaddingmaxPadding设置为0,以消除轴上不必要的空间;
将xAxis min设置为小于0,将max设置为0,以使频段显示在左侧(如果要在右侧显示,则将min设置为0,将max设置为更大的值)大于0);


这样,您可以将图表宽度设置为所需的任何宽度,并且栏/带应适当填充。


要使可见波段的部分变窄,请将x轴最小值设置为更接近零的值(例如-0.25)-要使其更宽,请将最小值设置为更远离零的值(例如-0.75)。
xAxis min设置将确定列和可见的plotBands所占x轴的比例。相应地调整。


更新小提琴:


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


输出:

javascript - 在Highcharts中,如何在柱形图中的y轴上设置绘图带的宽度?-LMLPHP

07-28 02:25
查看更多