PDA

View Full Version : How to change column width in extjs columns chart



ankrus
2 Mar 2014, 11:55 AM
Ext.define('Browser', {
extend: 'Ext.data.Model',
fields: [{
name: 'rate',
type: 'float'
},{
name: 'name',
type: 'string'
}]
});

var store = Ext.create('Ext.data.Store', {
model: 'Browser',
data: [
{ 'name': 'IE', 'rate':4},
{ 'name': 'Firefox', 'rate':5},
{ 'name': 'Google Chrom', 'rate':1},
{ 'name': 'IE', 'rate':27.72},
{ 'name': 'Firefox', 'rate':19.76}
]
});

Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: '???????????',
width: 600,
height: 300,
layout: 'fit',
items:[{
xtype: 'chart',
store: store,
axes: [{
title: '???? ????????',
type: 'Numeric',
position: 'left',
fields: ['rate'],
minorTickSteps: 5 // ???? ??????? ?? ??? y
},{
title: '???????',
type: 'Category',
position: 'bottom',
fields: ['rate']
}],

series: [{
type: 'column',
axis: 'bottom',
xField: 'name',
yField: 'rate',
gutter: 50, // ?????????? ????? ??????????, ? % ?? ?????? ???????
style:{
stroke: '#0000d2', // ???? ????? ???????
'stroke-width': 1, // ??????? ????? ???????
width:'4', // ?????? ??????? ???????????
fill: '#FF0000' // ???? ??????? ???????
},
label: {
field:'rate',
renderer: Ext.util.Format.numberRenderer('0')
}
}]
}]
});
48119

scottmartin
2 Mar 2014, 5:26 PM
On the series, set the width like this:



style:{
width:'30',
},

ankrus
3 Mar 2014, 3:55 AM
On the series, set the width like this:



style:{
width:'30',
},


Thank you Scott,

I did it, but a frame on the chart - remained!


style:{
width:'4', // ?????? ??????? ???????????
fill: '#FF0000' // ???? ??????? ???????
},


48126

I need to build a histogram of the width of the columns 2 and 3 pixels without distance between columns. To set the distance using the property gutter. And how to remove the frame around the column can not find.

B.r. Alex

scottmartin
3 Mar 2014, 5:53 AM
What version of Ext4 are you using? Older versions suffered from this bug.

You can test your code on each of our versions using our fiddle:
https://fiddle.sencha.com/#home

Scott.