values not correctly rendered in line chart in extjs?
Pergunta
I'm having trouble with result rendered by line chart example from extjs4 the columns are rendered correctly but the line is not, notice in the picture how i need to have 4 while its drawed in the 0 xpoint also the second plot is supposed to be 5 when its draw in 2: here is my code:
panel3 = Ext.create('widget.panel', {
width: 600,
height: 200,
frame: false,
renderTo: 'line',
layout: 'fit',
items: {
xtype: 'chart',
animate: false,
store: storeline,
insetPadding: 20,
gradients: [{
angle: 90,
id: 'bar-gradient',
stops: {
0: {
color: '#99BBE8'//C12283
},
70: {
color: '#77AECE'
},
100: {
color: '#77AECE'
}
}
}],
axes: [{
type: 'Numeric',
minimum: 0,
maximum: 10,
position: 'left',
fields: ['data1'],
title: false,
grid: true,
label: {
renderer: Ext.util.Format.numberRenderer('0,0'),
font: '10px Arial'
}
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: false,
grid: true,
label: {
font: '11px Arial',
rotate: {
degrees: 300
}
}
}],
series: [{
type: 'column',
axis: 'left',
xField: 'name',
yField: 'data1',
display: 'over',
style: {
fill: 'url(#bar-gradient)',
'stroke-width': 30
} ,
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 20,
fill: '#38FFFF',
stroke: '#38B8BF'
}
},
{
type: 'line',
axis: 'left',
xField: 'name',
yField: 'data2',
tips: {
trackMouse: true,
width: 110,
height: 25,
//baseCls: 'customtip', //bodyStyle: 'background:#6cc; ',
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ' : ' + storeItem.get('data2'));
}
},
style: {
fill: '#18428E',
stroke: '#18428E',
'stroke-width': 3
},
markerConfig: {
type: 'circle',
size: 5,
radius: 5,
'stroke-width': 0,
fill: '#18428E',
stroke: '#18428E'
}
}]
}
});
Solução
In your axis definition try changing
fields: ['data1'],
to
fields: ['data1', 'data2'],
Also verify that the data being loaded into the data2 field is an actual integer. ExtJs might be reading it as a string and therefore is unable to match it with a value on the left axis.
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow