由于突击进入项目中,使用的是未曾使用的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')
}
}]
}]
});