ExtJs/YUI Chartのチャートの色を動的に変更できますか？

Question

私のアプリケーションでExtJs/YUIチャートを使用しています。 データに基づいてチャートの色を動的に変更することは可能でしょうか？

つまり、特定の行の16進数の色を含むフィールドを含むストアがあります。棒グラフの棒の色を16進数値で動的に設定できますか？

Answer 1

はこれを試してみてください：

1. 隠しフィールドを作成し、色の値が含まれている店舗のフィールドの値にその値を割り当てます。
2. 棒グラフをレンダリングするときは、棒の背景色を隠しフィールドの値に設定します。

Answer 2

このblog postをご覧ください。チャートオブジェクトを設定するときは、色とそのシーケンスを定義するためにそのポストに記述されているスタイルプロパティを持つシリーズオブジェクトを渡します。

次に、ストアレコードをループして新しい配列を作成するか、store.queryを使用してストアから取り出します。次に、この配列をプロパティとして渡します。私は見つけることができていたものから

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

Answer 3

あなたは円グラフ（またはseries.colors属性を持つ別のチャート）を作成し、それしている場合、あなたは

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

メソッドを使用することができますよく働く。

series.colorsをサポートしていないタイプのグラフを使用している場合は、少し複雑になります。私はレンダラーメソッドを使用するとかなりうまく動作することを発見しました。私がすぐに見ることができるこの方法の唯一の問題は、それが凡例の色を変えないことです。これを店舗から引き出すことができるかどうかを調べるには、もう少し編集する必要があります。

伝説の問題を解明したら、教えてください。でも、これが役立つことを願っています。

注：以下のスクリプトで使用される変数のすべてがスクリプトに入力されているわけではありません。

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

はい、レンダラを使用して行うことができます。次のコード例は、棒グラフの棒の色を変更します。

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

ここで、「色」は店舗モデルのフィールドです。店舗の対応するレコードに設定することで、各バーに異なる色を設定できます。