实在无助开播求指导。extjs柱状图柱子的大小怎么设置。

由于突击进入项目中,使用的是未曾使用的extjs技术。工作是解决bug.

其中一个bug 优化柱状图的宽度。

这是需要优化的图:



这是我尝试之后的效果








    // 面板
    var pChart = Ext.create('Ext.panel.Panel', {
                width : '100%',
                height : 515,
                bodyStyle : 'border:0', // 针对panel
                layout : 'fit',
                items : [{
                    xtype : 'chart',
                    store : MainTransworkStore,
                    animate : true,
                    legend : {
                        position : 'bottom'
                    },
                    listeners: {    //柱状图数据刷新以后,如果有数据存在,则默认执行点击第一个柱的操作(高亮显示选中的柱)
                        'click': function(chart) {
                        }
                    },
                    shadow : true,
                    axes : [{
                                type : 'Numeric',
                                position : 'left',
                                id:'emissions',
                                grid : {
                                    even : {
                                        fill : '#ccc'
                                    }
                                },
                                minimum : 0,
                                fields : ['value'],
                                grid : {
                                    odd : {
                                        stroke : '#555'
                                    },
                                    even : {
                                        stroke : '#555'
                                    }
                                }
                            }, {
                                type : 'Category',
                                position : 'bottom',
                                // 将坐标轴的下的标签字体旋转90度
                                label : {
                                    rotate : {
                                        degrees : -0
                                    }
                                },
                                fields : ['time']
                            }],
                    series : [{
                        type : 'column',
                        axis : 'left',
                        xField : 'time',
                        yField : 'value',
                        highlight : true,
                        showInLegend : true,
                        id : 'average',
                        title : '排放量',
                        renderer : function(sprite, storeItem, barAttr, i,
                                store) {
                            this.setTitle(Ext.getCmp("enterComb").getValue());
                            barAttr.fill = colors[i % colors.length];


                            barAttr.width = 100;  //使用这句话,可以达到缩小宽度的效果,但是坐标不一致


                            return barAttr;
                        },
                        tips : {
                            trackMouse : true,
                            width : 100,
                            height : 20,
                            renderer : function(storeItem, item, barAttr) {
                                this.setTitle(storeItem.get('value')+ storeItem.get('unit'));
                            }

                        },
                        // 柱子上显示数据
                        label : {
                            display : 'insideEnd',
                            color : '#333',
                            'text-anchor' : 'middle',
                            field : ['value'],
                            renderer : Ext.util.Format.numberRenderer('0')
                        }
                    }]

                }]

            });

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值