Extjs 기둥 모양 그림 기둥 색상 및 각 기둥 색상 설정

1. Extjs에서 columnchart의 기둥 색 설정

chart의 theme만 설정하면 됩니다. 공식 문서에서 theme의 정의는 다음과 같습니다.

         The name of the theme to be used. A theme defines the colors andother visual displays of tick marks on axis, text, title text, line colors, marker colors and styles,   etc.Possible theme values are 'Base', 'Green', 'Sky', 'Red', 'Purple', 'Blue', 'Yellow' and also six category themes'Category1' to 'Category6'. Default value is 'Base'.

그래서 기둥의 색을 바꾸면 theme의 값을 바꿀 수 있습니다. 만약에 theme의 정의된 값이 당신의 색에 맞지 않으면 theme를 확장할 수 있습니다.

        

  var colors = ['rgb(212, 40, 40)'];
 Ext.define('Ext.chart.theme.Fancy', {
        extend: 'Ext.chart.theme.Base',
        
        constructor: function(config) {
            this.callParent([Ext.apply({
                colors: colors
            }, config)]);
        }
    });

2. Extjs에서 columnchart의 기둥 색깔 설정

먼저 기둥 색상을 정의합니다.

 var colors = ['rgb(212, 40, 40)',
                  'rgb(180, 216, 42)',
                  'rgb(43, 221, 115)',
                  'rgb(45, 117, 226)',
                  'rgb(187, 45, 222)'];

그리고 시리즈에서renderer 속성을 정의하는 함수

 function(sprite, storeItem, barAttr, i, store) {
                    barAttr.fill = colors[i % colors.length];
                    return barAttr;
  }