Самый простой способ создать разноцветную диаграмму столбца ExtJS

Question

Как видно на примере кухонной раковины в http://dev.sencha.com/ext/5.0.1/examples/kitchensink/?charts=true каждый столбец имеет одинаковый цвет по умолчанию.

Изменить цвет для всех кажется довольно простым, но я изо всех сил пытаюсь найти решение, чтобы заполнить каждый столбец отдельным цветом.

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

Приведенный ниже фрагмент кода устанавливает цвет всех столбцов для первого элемента массива (кремовый).

Какие-либо предложения?

Код у меня в настоящее время выглядит примерно так:

axes: [{
                    type: 'numeric',
                    position: 'left',
                    title: {
                        text: 'Cost',
                        fontSize: 15
                    },
                    grid: true,
                    minimum: 0,
                    fields: 'Value'
                }, {
                    type: 'category',
                    position: 'bottom',
                    title: {
                        text: 'Type',
                        fontSize: 15
                    },
                    fields: 'Type'
                }],
                series: {
                    type: 'bar',
                    xField: 'Type',
                    yField: 'Value'
                },
                colors: [
                    '#FFEC94', //cream
                    '#F7FE2E', //yellow
                    '#3ADF00', //green
                    '#B4D8E7', //light blue
                    '#56BAEC', //blue
                    '#FA5858', //red
                    '#FFAEAE', //pink
                    '#FAAC58' //orange
                ]

Answer 1

Я нашел решение, используя конфигурацию рендерера для панели, которая перебирает массив цветов, которые у меня есть

renderer: function(sprite, record, attr, index, store) {
                        var colors =  [
                            '#FFEC94', //cream
                            '#F7FE2E', //yellow
                            '#3ADF00', //green
                            '#B4D8E7', //light blue
                            '#56BAEC', //blue
                            '#FA5858', //red
                            '#FFAEAE', //pink
                            '#FAAC58' //orange
                        ][index];
                    return Ext.apply(attr, {fill: colors});
                    }