Extjs Изменение цвета столбцов в столбчатой ​​диаграмме с накоплением

давайте возьмем этот пример... как изменить цвета этих полос?

Я знаю, что могу изменить его с помощью рендерера, но это не изменит легенду.

Я пытался использовать:

style: {fill: 'red'}

но он меняет цвет когда-либо полосы

Я пытался поместить цвета в массив, это не работает.

Я попытался поместить каждый стиль в массив, например:

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

Но это тоже не сработает, так как я могу поместить заголовки в массив, например:

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

Я думал, что это (стили) тоже должно работать, но нет.

Итак, как я могу изменить цвет каждой панели «данных»?


colors charts bar-chart extjs stacked
person Nazin    schedule 15.06.2011    source источник

Ответы (6)


arrow_upward
10
arrow_downward

Цвета столбцов на самом деле определяются темой диаграммы:

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

Чтобы использовать собственные цвета, вам потребуется расширить существующую тему «Базовая», как в пример пользовательской диаграммы с областями.

person NT3RP    schedule 15.06.2011

arrow_upward
4
arrow_downward

Диаграмма использует тему в качестве примесей

Таким образом, вы можете напрямую использовать свойство темы под названием themeAttrs.

Например, если вы находитесь в конструкторе столбчатой/столбчатой ​​диаграммы, хотите изменить цвет столбцов. Вы можете указать

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

arrow_upward
3
arrow_downward 

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

используя colorSet, вы можете изменить цвет.

person Swati Pisal    schedule 28.11.2012

arrow_upward
1
arrow_downward

Я решил добавить полный код:

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);
    },
...
person user2368285    schedule 10.05.2013

arrow_upward
0
arrow_downward

Если вы не хотите использовать тему, вы можете использовать это (по крайней мере, это сработало для меня):

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

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

person toni07    schedule 03.12.2013

arrow_upward
0
arrow_downward

Я использую Ext JS 5.0. Не о чем беспокоиться, просто последовательно включите конфигурацию цветов.

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