Extjs Cambiar el color de las barras en el gráfico de barras apiladas

Question

tomemos this example ... cómo cambiar los colores de esas barras?

Sé que puedo cambiarlo a través del procesador pero no cambiará la leyenda.

he tratado de usar:

style: {fill: 'red'} 

pero cambia el color de la barra de vez

He tratado de poner los colores en orden, no su trabajo.

he tratado de poner a cada estilo en orden, así:

style: [{fill: 'red'}, {fill: 'green'}, {fill: 'blue'}] 

pero no va a funcionar bien, ya puedo poner títulos en serie como:

title: ['title1', 'title2', 'title3'] 

pensé it (styles) debería funcionar también, pero no.

Entonces, ¿cómo puedo cambiar el color de cada barra de "datos"?

Answer 1

colores de la barra en realidad están determinados por el chart's theme:

Ext.create('Ext.chart.Chart', { 
    theme: 'myTheme' 
    //the remainder of your code... 
}); 

Para utilizar colores personalizados, tendrá que extender el tema existente 'Base', como en el custom area chart example.

Answer 2

Ext.onReady(function() 
{ 

    Ext.create('Ext.window.Window', 
    { 
    title: 'Pie1 Chart', 
    height: 400, 
    layout: 'fit', 
    width: 400, 
    items: 
    [{ 
     xtype: 'chart', 
     animate:false , 
     insetPadding:0, 

     legend: 
    { 
     position: 'right' 
     }, 
     shadow: true, 
     store: 
    { 
     fields: 
    [{ 
      name: 'category', type: 'string' 
     }, 

    { 
      name: 'data', type: 'float' 
     }], 
     data: 
    [{ 
      category: 'Alive', data: 1.5 
     },{ 
      category: 'Dead', data: 2 
     },{ 
      category: 'Standby', data: 1 
     }] 
     }, 
     series: [{ 
     type: 'pie', 
     field: 'data', 
    colorSet: ['#0000FF','#FFffff','#00FF00'], 

     showInLegend: true, <!--It is use to display data in which color.--> 
     highlight: { 
      segment: { 
      margin: 20 
      } 
     }, 
     label: { 
      field: 'category', 
      display: 'rotate', 
      contrast: true, 
      font: '18px Arial' 
     } 
     }] 
    }] 
    }).show(); 
}); 

usando colorPie de cambiar el color.

Answer 3

Gráfico utiliza el tema como mixins

lo que puede utilizar directamente el tema de propiedad llamados themeAttrs.

Por ejemplo, si usted está en el constructor de la columna gráfico de columnas/apilado, quiere cambiar el color de las columnas Puede especificar

this.themeAttrs.colors = ['#F2C72B','#a5c249','#E88712','#9D5FFA']; 

Answer 4

decidí añadir código completo:

Ext.require('EAM.view.chart.*'); 
Ext.define('EAM.view.chart.integral.IntegralChart', 
{ 
    extend : 'Ext.chart.Chart', 
    alias : 'widget.GroupsIntegralChart', 
    animate : true, 
    shadow : true, 
    // theme : 'Browser:gradients', 

    initComponent : function() 
    { 
     var me = this; 
     me.themeAttrs.colors = 
     [ 
      'orange', 
      'red', 
      'blue', 
      'green', 
     ]; 
     me.callParent(arguments); 
    }, 
... 

Answer 5

Si No quiero utilizar un tema , puede utilizar esto (al menos funcionó para mí):

this.series = [{ 
type: 'column', 
axis: 'left', 
showInLegend : true, 
xField: 'f1', 
style :{ 
    fill : '#ff00ff', 
    'stroke-width': 3, 
    width: 20 
}, 
renderer: function(sprite, storeItem, barAttr, i, store) { 
    barAttr.fill = '#ff00ff'; 
    barAttr.width = 20; 
    return barAttr; 
}, 
title : 'title', 
yField: 'f2' 
}] 

Tenga en cuenta que tiene que poner su color en dos líneas diferentes (creo que ExtJS a veces es un poco estúpido marco).

Answer 6

Estoy usando Ext JS 5.0 No hay necesidad de preocuparse, solo incluya la configuración de colores en serie.

series : [{ 
     type : 'bar', 
     colors:['#f23f3f','#ff8809','#ff0','#0039a6','#00ee88','#ff8aed'], 
     xField : ['Q1'] 
     yField : ['Critical', 'Major', 'Minor', 'Warning', 'Informational', 'Indeterminent'] 
}]