ExtJS v4.0 - 帶自定義純色條的條形圖

Question

我在使用純色＃006AB8爲ExtJS中的條形圖着色時遇到問題。

從看文檔，我有一些工作，沒有顏色。

這裏是我的系列代碼：

  series: [{ 
      type: 'bar', 
      axis: 'bottom', 
      highlight: true, 
      tips: { 
       trackMouse: true, 
       width: 140, 
       height: 28, 
       renderer: function(storeItem, item) { 
       this.setTitle(storeItem.get('callcentre') + ': ' + storeItem.get('calls')); 
       } 
      }, 
      label: { 
       display: 'insideEnd', 
       field: 'calls', 
       renderer: Ext.util.Format.numberRenderer('0'), 
       orientation: 'horizontal', 
       color: '#333', 
       'text-anchor': 'middle' 
      }, 
      xField: 'callcentre', 
      yField: ['calls'], 
      renderer: function() { 
        return Ext.apply({ 
          fill: '#006AB8' 
        }); 
      } 
     }] 

這是這一場的渲染，我不能工作，如何將它正確格式。

謝謝，

盧克。

Answer 1

你可以嘗試這樣的代碼：

 
    renderer: function(sprite, record, attr, index, store) { 
     return Ext.apply(attr, { 
      fill: '#006AB8' 
     }); 
    } 

Answer 2

我做這樣做了。

renderer: function(sprite, record, attr, index, store) { 
    var value = 0; 
    var color = ['rgb(147, 169, 208)'][value]; 
    return Ext.apply(attr, { 
     fill: color 
    }); 
} 

如果你想有更多的色彩選擇，只是做這樣的：

var value = 3; <-- the value determines the color array (index starts 0). 
var color = [ 
    'rgb(114, 19, 15)', 
    'rgb(92, 48, 71)', 
    'rgb(81, 114, 179)', 
    'rgb(196, 185, 183)', 
    'rgb(13, 111, 62)', 
    'rgb(158, 129, 133)', 
    'rgb(50, 107, 126)'][value]; 
    return Ext.apply(attr, { 
    fill: color 
});