2

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

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

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

{
  style: { width: 25 }
}

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

像这样：

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

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

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

有任何想法吗？

4

5 回答 5

5 
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)
    });
}
于 2014-06-04T07:40:08.577 回答
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 轴并找到任何给定的点（标签条纹），而不是通过我的条循环，您可以使用计数或其他东西并使用 in 代替 value。希望它有效！

于 2013-09-06T21:38:42.703 回答
1 
//try like below
series:[
    {...
        style:{
            minBarWidth:5,
            maxBarWidth:5
        }
    },
    {...}
]
于 2017-02-07T12:32:23.087 回答
0

我认为问题在于您要查找的图表是笛卡尔图表，而柱形图对您不起作用，因为它没有任何确切的 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）数据插入您不想显示的数据。如果您不知道列（行）的数量，则必须动态创建它们。

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

于 2012-04-21T15:30:14.797 回答
0

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

于 2013-12-16T12:22:49.210 回答