是否有一种明智的方法来确定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'
}]
就是这样
这就是我喜欢的样子
最佳答案
我会使用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,将max设置为更大的值)大于0);这样,您可以将图表宽度设置为所需的任何宽度,并且栏/带应适当填充。
要使可见波段的部分变窄,请将x轴最小值设置为更接近零的值(例如
-0.25
)-要使其更宽,请将最小值设置为更远离零的值(例如-0.75
)。xAxis
min
设置将确定列和可见的plotBands
所占x轴的比例。相应地调整。更新小提琴:
https://jsfiddle.net/jlbriggs/hvy162k5/16/
输出: