I colori nei grafici in ExtJs/YUI possono essere modificati dinamicamente?

Question

Sto usando i grafici ExtJs/YUI nella mia applicazione. Quello che mi chiedo, è possibile cambiare dinamicamente il colore su uno qualsiasi dei grafici basati sui dati?

Ad esempio, ho un negozio che contiene un campo che contiene il colore esadecimale per quella particolare riga. È possibile impostare dinamicamente il colore di una barra nel grafico a barre con il valore esadecimale?

Answer 1

Prova questo:

1. creare un campo nascosto e assegnare il suo valore al valore del campo negozio che contiene il valore del colore.
2. durante il rendering del grafico a barre, impostare il colore di sfondo di una barra sul valore del campo nascosto.

Answer 2

Dai un'occhiata a questo blog post. Quando si configura l'oggetto grafico, passare un oggetto serie con una proprietà di stile come descritto in quel post per definire i colori e la loro sequenza.

Quindi devi solo ottenere i colori eseguendo il ciclo dei record del negozio e creando un nuovo array, o forse estraendolo dal tuo negozio con store.query. Quindi passa questo array come proprietà.

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

Answer 3

Da quello che ho potuto trovare, è possibile utilizzare il metodo

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

se si sta creando un grafico a torta (o un altro grafico con series.colors attribuiscono), ed è funziona alla grande.

Se si utilizza un tipo di grafico che non supporta series.colors ... diventa un po 'più contorto. Ho scoperto che l'utilizzo del metodo di rendering funziona abbastanza bene. L'unico problema con questo metodo (che posso vedere subito) è che non cambia i colori nella legenda. Ci vorrebbe qualche ulteriore modifica per vedere se questo potrebbe essere tirato dal negozio.

Se si rileva il problema della legenda, fatemi sapere, ma spero che questo aiuti.

Nota: non tutte le variabili utilizzate nello script seguente vengono popolate nello script.

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ì, è possibile farlo utilizzando i renderer. L'esempio di codice seguente modifica i colori delle barre nel grafico a barre:

  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, 
        }); 
       } 
      } 

Qui 'colore' è un campo del modello di negozio. Puoi impostare un colore diverso per ogni barra impostandolo nel record corrispondente nel tuo negozio.