ExtJs棒グラフの4色テーマ

Question

私はextJs 4を使用して、このhttp://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/charts/BarRenderer.htmlのようなグラフを描画しています。しかし、私は各バーに2つ以上のセグメントを持ち、任意の数のバーがあります。私はすべてのバーのために全く異なる色をしたい。さらに、私はそのバーのセグメントのための現在のバーの色の異なる色合いが欲しい。同じ色のコードを凡例に反映させる必要があります。 あなたのご協力をよろしくお願い申し上げます。

Answer 1

色を指定するカスタムチャートテーマを作成する必要があります。私は折れ線グラフのために一度行った。あなたはbarchartのためにそれを動作させるためにいくつかのことをする必要があるかもしれません、もしそうなら、％extjs-root％/ src/chart/theme/Base.jsのすべてのオプションを見つけることができます。私は、折れ線グラフのために持っていたものをHERESに：

// CUSTOM CHART THEME 
Ext.chart.theme.myTheme = Ext.extend(Ext.chart.theme.Base, { 
    constructor: function(config) { 
     Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({  
      colors: ['rgb(0, 0, 0)', 
        'rgb(0,0,255)', 
        'rgb(255,0,0)', 
        'rgb(0,128,0)', 
        'rgb(128,0,128)' 
      ],       
     }, config)); 
    } 
}); 

あなたの棒グラフの設定でテーマを含んでいることを確認してください。

xtype: 'chart', 
style: 'background:#fff', 
animate: true, 
store: myChartStore, 
theme: 'Events', 
legend: { 
    position: 'right' 
}, 
// other configs ... 

Answer 2

解決策が見つかりました。

あなたのビューでこれを入れて

http://www.sencha.com/learn/drawing-and-charting/

：その後、

var colors = ['#ff0000','#FF9900','#009933',  '#888',    '#999']; 
var baseColor = '#eee'; 
Ext.define('Ext.chart.theme.Fancy', { 
    extend: 'Ext.chart.theme.Base', 
    constructor: function(config) { 
     this.callParent([Ext.apply({   
      colors: colors 
     }, config)]); 
    } 
}); 

そして、あなたが作成したテーマを呼び出す：

Ext.define('MyAPP.view.Graph.GrafPlazos',{ 
    extend: 'Ext.chart.Chart', 
    alias : 'widget.plazocibar', 
    id: 'chart_plazosci', 
    xtype: 'chart', 
    style: 'background:#fff', 
    animate: true, 
    shadow: true, 
    store: 'Plazos.GPlazosci', 
    theme: 'Fancy', 

Answer 3

チャートは、ミックスイン

だから、あなたが直接できるようテーマを使用していますthemeAttrsというテーマプロパティを使用します。

例えば

あなたはあなたが指定することができ、列/積み重ね縦棒グラフのコンストラクタである列の色を変更したい場合は

this.themeAttrs.colors = [「＃のF2C72B」、「＃のa5c249」、」 ＃E88712 '、'＃9D5FFA '];