ExtJS v4.0 - гистограмма с настраиваемыми сплошными цветными полосками

Question

У меня возникли проблемы с окраской гистограммы в ExtJS с сплошным цветом # 006AB8.

От взгляда на документы у меня есть что-то вроде работы, без цвета.

Вот код для моей серии:

  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' 
        }); 
      } 
     }] 

Это визуализатор, что сломался, и я не могу работать, как отформатировать его должным образом.

Thanks,

Luke.

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

Answer 3

Я надеюсь, что смогу помочь

Я окрашена свой бар, как это:

var colors = ['rgb(255, 255, 0)', 
        'rgb(125, 255, 0)', 
        'rgb(0, 255, 0)', 
        'rgb(0, 255, 125)', 
        'rgb(0, 0, 255)']; 

Ext.chart.theme.Browser = Ext.extend(Ext.chart.theme.Base, { 
    constructor: function (config) { 
     Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({ 
      colors: colors 
     }, config)); 
    } 
}); 

После этого вы передаете тему «Браузер: градиенты» на ваш график как свойство:

var chart = Ext.create('Ext.chart.Chart', { 
    width: 500, 
    height: 200, 
    theme: 'Browser:gradients', 
    ...});