Czy kolory na wykresach w tabelach ExtJs/YUI mogą być zmieniane dynamicznie?

Question

Używam wykresów ExtJs/YUI w mojej aplikacji. Zastanawiam się, czy możliwa jest dynamiczna zmiana koloru na dowolnym wykresie na podstawie danych?

tj. Mam sklep, który zawiera pole zawierające kolor heksadecymalny dla tego konkretnego wiersza. Czy możliwe jest dynamiczne ustawianie koloru paska na wykresie słupkowym z wartością szesnastkową?

Answer 1

Spróbuj tego:

1. utworzyć ukryte pole i przypisać jej wartość do wartości pola magazynu, który zawiera wartość koloru.
2. Podczas renderowania wykresu słupkowego ustaw kolor tła paska na wartość ukrytego pola.

Answer 2

Proszę spojrzeć na to blog post. Podczas konfigurowania obiektu wykresu należy przekazać obiekt serii z właściwością stylu opisaną w tym poście, aby zdefiniować kolory i ich kolejność.

Następnie wystarczy uzyskać kolory poprzez zapętlenie rekordów sklepu i zbudowanie nowej tablicy lub pobranie jej ze sklepu za pomocą store.query. Następnie przekaż tę tablicę jako właściwość.

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

Answer 3

Z tego co udało mi się znaleźć, można użyć metody

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

Jeśli tworzysz wykres kołowy (lub inny wykres z series.colors przypisują), i działa świetnie.

Jeśli używasz wykresu, który nie obsługuje serii.colors ... staje się nieco bardziej skomplikowany. Zauważyłem, że używanie metody renderer działa całkiem dobrze. Jedynym problemem związanym z tą metodą (którą widzę od razu) jest to, że nie zmienia ona kolorów w legendzie. Trochę dalszej edycji wymagałoby sprawdzenie, czy można go wyciągnąć ze sklepu.

Jeśli znasz problem z legendą, daj mi znać, ale mam nadzieję, że to pomoże.

Uwaga: Nie wszystkie zmienne użyte w poniższym skrypcie są wypełnione w skrypcie.

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

Tak, można to zrobić za pomocą renderers. Poniższy przykład kodu zmienia kolory słupków na wykresie słupkowym:

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

Tutaj "kolor" jest polem modelu sklepu. Możesz ustawić inny kolor dla każdego paska, ustawiając go w odpowiednim rekordzie w swoim sklepie.