我有一个 250px 宽的柱形图，当系列中有 10 多个项目时它看起来很棒，但是当只有 2-3 个时，条形图绘制得非常宽，看起来有些奇怪。
_____
| |
| |
-----|-----
我可以在系列配置中设置宽度：
{
style: { width: 25 }
}
这可行，但较细的条仍与其先前位置左对齐，因此它们与轴刻度和标签不匹配。
像这样：
_
| |
| |
-----|-----
我不想更改轴间距，我希望得到宽间距的 25 像素条（正确地以轴刻度为中心）：
_
| |
| |
-----|-----
有什么想法吗？
【问题讨论】：
标签： javascript extjs charts extjs4
我认为问题在于您要查找的图表是笛卡尔图表，而柱形图不适合您，因为它没有任何确切的 X 值。
所以，我模拟笛卡尔图（如折线图）看起来像这样的柱形图：
这是一个诡计，但对我来说效果很好。
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['min-X','max-X']
}, {
type: 'Numeric',
position: 'left',
fields: ['min-Y','max-Y']
}],
series: [{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line1-X',
yField: 'line1-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line2-X',
yField: 'line2-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line3-X',
yField: 'line3-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line4-X',
yField: 'line4-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
}]
还有数据：
{
line1-X: 2, line1-Y: 0,
line2-X: 5, line2-Y: 0,
line3-X: 5.5, line3-Y: 0,
line4-X: 8, line4-Y: 0,
min-X: 0, min-Y: 0,
max-X: 10, max-Y: 100
},{
line1-X: 2, line1-Y: 40,
line2-X: 5, line2-Y: 80,
line3-X: 5.5, line3-Y: 60,
line4-X: 8, line4-Y: 100,
min-X: 0, min-Y: 0,
max-X: 10, max-Y: 100
}
但在这种方法中，您必须知道您拥有的最大列数（行数）。并且每次将零（0）数据插入您不想显示的数据。如果您不知道列（行）的数量，则必须动态创建它们。
这是我的想法，它按照我想要的方式工作。也许它可以帮助您找到解决方案。
【讨论】：
可能有点晚了，但这是我的解决方案
renderer: function(sprite, record, attr, index, store) {
return Ext.apply(attr, {
fill: color,
width: 50,
x: Ext.getCmp('chart_id').axes.items[1].inflections[value][0] - 25
});
}
在此示例中，我读取 x 轴并找到任何给定的点（标签条纹），而不是通过我的条循环，您可以使用计数或其他东西并使用 in 代替 value。希望它有效！
【讨论】：
Math.max(attrs.x, attrs.x + (attrs.width - 50) / 2) 而无需访问图表轴。
尝试使用“gutter”属性设置列之间的间隙。
【讨论】：
renderer: function(sprite, record, attr, index, store) {
return Ext.apply(attr, {
fill: color,
width: 50,
x: Math.max(attr.x, attr.x + (attr.width - 50) / 2)
});
}
【讨论】：
//try like below
series:[
{...
style:{
minBarWidth:5,
maxBarWidth:5
}
},
{...}
]
【讨论】：