Question

我有一个250px宽的柱形图，当系列中有10个以上的项目时看起来很棒，但是当只有2-3个时，条形图画得非常宽，看起来有些奇怪。

   _____
  |     |
  |     |
-----|-----

我可以在系列配置中设置宽度：

{
  style: { width: 25 }
}

这样可行，但较细的条仍与其先前位置左对齐，因此它们与轴标记和标签不匹配。

像这样：

   _
  | |
  | |
-----|-----

我不想改变轴间距，我希望最终得到宽间距的25px条（正确地以轴为中心）：

     _
    | |
    | |
-----|-----

有什么想法吗？

Answer 1

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)
    });
}

Answer 2

也许有点迟到但这是我的解决方案

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 ax并找到了任何给定的点（标签条纹），而不是通过我的条形循环，你可以使用计数或其他东西而使用in而不是value。希望它有效！

Answer 3

我认为问题在于您要查找的图表是笛卡尔图表，柱形图对您不起作用，因为它没有任何确切的X值。

所以，我模拟笛卡尔图（如折线图）看起来像这样的柱形图：

enter image description here

这不过是一种技巧，但对我来说效果很好。

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
}

但是在这种方法中，你必须知道你拥有的最大列数（行数）。每次将Zero（0）数据插入到您不想显示的数据中。如果您不知道列（行）的数量，则必须动态创建它们。

这是我的想法，它按我想要的方式工作。也许它可以帮助您找到解决方案。

Answer 4

尝试使用“gutter”属性设置列之间的间隙。

Answer 5

//try like below
series:[
    {...
        style:{
            minBarWidth:5,
            maxBarWidth:5
        }
    },
    {...}
]

在ExtJS 4柱形图中设置最大条宽？

5 个答案: