ExtJs 4 цветовая тема для гистограммы

Question

Я использую extJs 4 для рисования графика, подобного этому http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/charts/BarRenderer.html. Однако у меня будет 2 или более сегмента для каждого бара, и может быть любое количество баров. Я хочу иметь совершенно разные цвета для всех баров. Кроме того, я хочу разные оттенки текущего цвета бара для сегментов этого бара. Такие же коды цветов должны быть отражены в легендах. Ваша помощь очень ценится.

Answer 1

Вам нужно будет создать собственную тему диаграммы, которая задает цвета.Я сделал один для линейного графика один раз.Возможно, вам придется поэкспериментировать с этим, чтобы заставить его работать на диаграмме, если это так, вы можете найти все возможные варианты в% extjs-root% / src / chart / theme / Base.js.Вот что у меня было для линейного графика:

// 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'];