2011-06-01 19 views
5

Estoy utilizando Ext4 js para crear gráficos. Mis gráficos son gráficos de líneas que muestran la evolución de los acontecimientos en el tiempo, por lo que mi parte inferior de los ejes es un momento ejes:ExtJs Gráficos con eje de tiempo, problema de actualización

{ 
    type: 'Time', 
    position: 'bottom', 
    grid: grid, 
    fields: 'name', 
    title: false, 
    dateFormat: 'd/m/y', 
    groupBy: 'year,month,day', 

    aggregateOp: 'sum', 
    label: { 
     orientation: 'horizontal', 
     rotate: { 
      degrees: label_rotation 
     } 
    } 

tengo enlaces para cambiar la escala. Al hacer clic en uno de esos enlaces, debe cambiar las opciones de formato de fecha y grupo. Aquí el código:

scaleGroups = { 
    'DAY': { 
    dateFormat: 'd/m/y', 
     groupBy: 'year,month,day' 
    }, 
    'MONTH' :{ 
      dateFormat: 'M Y', 
      groupBy: 'year,month' 
    }, 
    'YEAR' :{ 
      dateFormat: 'Y', 
      groupBy: 'year' 
    } 
}; 


function changeChartScale(chart_id, scale) { 
    var chart = Ext.getCmp(chart_id); 
    var axis = chart.axes.get(1); 
    selectedGroup = scaleGroups[scale]; 
    axis.dateFormat = selectedGroup.dateFormat; 
    axis.groupBy = selectedGroup.groupBy; 

    chart.redraw(); 
} 

El problema es que el cambio de una escala a otra, por ejemplo, de días a meses, etiquetas anteriores se mantienen. Entonces, la línea es correcta, pero veo etiquetas de día y etiquetas de mes.

¿Alguien sabe por qué?

Gracias de antemano, Sabrina

ACTUALIZACIÓN 07/06/2011: El mismo código en una página HTML de ejemplo, la importación sólo que esta librería javascript, funciona.

Tal vez sea un problema de compatibilidad con otras bibliotecas de JavaScript que utilizo (Jquery, googlempas ...). ¿Alguien ha tenido el mismo problema?

Respuesta

1

¡Creo que he encontrado una solución! Simplemente configure la propiedad mínima y máxima en ejes con valores razonables (es decir: por días, ajuste 31, por meses, establezca 12). ¡Esto funciona para mi!

5

He encontrado una solución ya que el método chart.redraw() no volver a dibujar automáticamente los valores de los ejes/escala.

establecer un nuevo máximo para los ejes, a continuación, utilizar el método axis.drawAxis() antes de volver a dibujar el gráfico ...

Mi carta redibuja cuando el usuario ordena una columna en una cuadrícula enlazado.

chart.axes.items[0].fields = [column.dataIndex]; 
    chart.series.items[0].yField = [column.dataIndex]; 


    var s = Ext.data.StoreManager.lookup('myStore'); 
    var max = s.max(column.dataIndex); 


    chart.axes.items[0].maximum = max; 
    chart.axes.items[0].drawAxis(); 


    chart.redraw(); 
Cuestiones relacionadas