Scroll en gráfica de series
Hola a todos
Tengo una gráfica con series que visualiza bien las series y la información como es, el problema es que cuando los datos del eje x son muchos, nada mas me muestra hasta donde llega el tamaño de la ventana y gráfica. Mi pregunta es como es posible habilitar un scroll o como puedo configurar para mostrar toda la información del eje x.
Aquí pongo el código de la gráfica:
this.record = new Ext.data.Record.create([
{
name: 'metros',
mapping: 'metros',
type: 'float'
},
{
name: 'metros1',
mapping: 'metros1',
type: 'float'
},
{
name: 'metros2',
mapping: 'metros2',
type: 'float'
},
{
name: 'metros3',
mapping: 'metros3',
type: 'float'
},
{
name: 'material_descripcion',
mapping: 'material_descripcion',
type: 'string'
}
]);
this.reader = new Ext.data.JsonReader({
idProperty: 'material_descripcion',
root: 'items',
successProperty: 'success',
totalProperty: 'total'
}, this.record);
this.store = new Ext.data.Store({
reader: this.reader,
proxy: new Ext.data.HttpProxy({
method: 'POST',
prettyUrls: false,
url: 'impresion/graficarImpresionesRangoFechaMateriales',
timeout: 120000
})
});
//this.columnChart
this.columnChart = new Ext.chart.ColumnChart({
anchor: '100%',
store: this.store,
xField: 'material_descripcion',
extraStyle:{
legend:{
display: 'bottom'
}
},
series:[
{
yField: 'metros',
displayName: 'Bobina 127'
},
{
yField: 'metros1',
displayName: 'Bobina 100'
},
{
yField: 'metros2',
displayName: 'Bobina 76'
},
{
yField: 'metros3',
displayName: 'Bobina Plotter'
}
],
yAxis: new Ext.chart.NumericAxis({
displayName: 'Metros',
labelRenderer : Ext.util.Format.numberRenderer('0,0')
}),
chartStyle: {
padding: 10,
animationEnabled: true,
font: {
name: 'Tahoma',
color: 0x444444,
size: 11
},
dataTip: {
padding: 5,
border: {
color: 0x99bbe8,
size:1
},
background: {
color: 0xDAE7F6,
alpha: .9
},
font: {
name: 'Tahoma',
color: 0x15428B,
size: 10,
bold: true
}
},
xAxis: {
color: 0x69aBc8,
majorTicks: {
color: 0x69aBc8,
length: 4
},
minorTicks: {
color: 0x69aBc8,
length: 2
},
majorGridLines: {
size: 1,
color: 0xeeeeee
}
},
yAxis: {
color: 0x69aBc8,
majorTicks: {
color: 0x69aBc8,
length: 4
},
minorTicks: {
color: 0x69aBc8,
length: 2
},
majorGridLines: {
size: 1,
color: 0xdfe8f6
}
}
}
});
this.panel = new Ext.Panel({
layout:'anchor',
//width: 400,
//height: 300,
anchor: '100%, 100%',
items: [
this.columnChart
]
});
mcurbelo
24/10/2011
¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook
Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.