¿Se pueden cambiar dinámicamente los colores de los gráficos de ExtJs/YUI?

Question

Estoy usando tablas ExtJs/YUI en mi aplicación. Lo que me pregunto, ¿es posible cambiar dinámicamente el color en cualquiera de los gráficos en función de los datos?

es decir, tengo una tienda que contiene un campo que contiene el color hexadecimal para esa fila en particular. ¿Es posible establecer dinámicamente el color de una barra en el gráfico de barras con el valor hexadecimal?

Answer 1

Prueba esto:

1. crear un campo oculto y asignar su valor al valor del campo tienda que contiene el valor del color.
2. al representar un gráfico de barras, establezca el color de fondo de una barra en el valor del campo oculto.

Answer 2

Echa un vistazo a este blog post. Cuando configura el objeto de gráfico, pase un objeto en serie con una propiedad de estilo como se describe en esa publicación para definir los colores y su secuencia.

Luego solo necesita obtener sus colores, ya sea recorriendo los registros de su tienda y construyendo una nueva matriz, o tal vez sacándola de su tienda con store.query. Luego pasa esta matriz como la propiedad.

(...), 
series: [style: { colors: arrayBuiltFromStore }], 
(...) 

Answer 3

Por lo que he podido encontrar, puede utilizar el método

(...), 
series: [style: {colors: arrayBuiltFromStore }], 
(...) 

si va a crear un gráfico circular (u otro gráfico con series.colors atributo), y Funciona genial.

Si está utilizando un tipo de gráfico que no admite series.colors ... se vuelve un poco más intrincado. Descubrí que usar el método de renderizado funciona bastante bien. El único problema con este método (que puedo ver de inmediato) es que no cambia los colores en la leyenda. Se necesitaría una edición adicional para ver si esto podría extraerse de la tienda.

Si descubres el problema de la leyenda, házmelo saber, pero espero que esto ayude.

Nota: No todas las variables utilizadas en la secuencia de comandos siguiente se rellenan en la secuencia de comandos.

function myColorer(rec) { 
var aFiller = new Array('#0000FF','#31CD31','#FFFF00','#FF0000'); 
    return aFiller[rec]; 
} 
Ext.onReady(function() { 
    var sDataStore = new Ext.data.JsonStore(sPathToDataStore); 
    chart = new Ext.chart.Chart({ 
     renderTo: document.getElementById('test-graph'), 
     width: 800, 
     height: 600, 
     animate: true, 
     store: sDataStore, 
     legend: { 
      position: 'right', 
      isVertical: true, 
     }, 
     axes: [{ 
      type: 'Numeric', 
      grid: true, 
      position: 'left', 
      fields: ['field1','field2','field3','field4'], 
      title: 'Title Here', 
      grid: { 
       odd: { 
        opacity: 1, 
        fill: '#ddd', 
        stroke: '#bbb', 
        'stroke-width': 1 
       } 
      }, 
      minimum: 0, 
      adjustMinimumByMajorUnit: 0 
     }, { 
      type: 'Category', 
      position: 'bottom', 
      fields: label1, 
      title: sXAxisLabel, 
      grid: true, 
     }], 
     series: [{ 
      renderer: function(sprite, record, curAttr, index, store) { 
       var color = myColorer(index); 
       return Ext.apply(curAttr, { 
        fill: color 
       }); 
      }, 
      type: 'area', 
      highlight: false, 
      axis: 'left', 
      xField: label1, 
      yField: ['field1','field2','field3','field4'], 
      style: { 
       opacity: 0.93 
      } 
     }] 
    }); 
}); 

Answer 4

Sí, puede hacerlo mediante el uso de procesadores. El siguiente ejemplo de código cambia los colores de las barras en el gráfico de barras:

  series: { 
       type: 'bar', 
       xField: 'name', 
       yField: 'value', 
       label:{ 
        field: 'value' 
       }, 
       renderer: function(sprite, config, rendererData, index) { 

        var record = rendererData.store.getData().items[index]; 

        return Ext.apply(rendererData, { 
         fillStyle: record.data.color, 
        }); 
       } 
      } 

Aquí 'color' es un campo del modelo de tienda. Puede establecer un color diferente para cada barra configurándolo en el registro correspondiente en su tienda.