Extjs4 막대 차트의 각 막대 색상 변경

막대 차트가 있으며 각 막대를 다른 색상으로 렌더링하려고합니다.Extjs4 막대 차트의 각 막대 색상 변경

   Ext.define('Ext.chart.theme.FancyTheme',{ 
extend : 'Ext.chart.theme.Base', 

constructor : function(config){ 
    this.callParent([Ext.apply({ 
     colors : ['#9CC5C9','#D5544F','#D5544F','#5288DB'] 
    },config)]) 
} 
});

내 차트 코드는 다음과 같습니다 : 그래서 내가 thems를 사용하여 시도, 샘플 코드는 위의 '#의 9cc5c9'에,

 var tc = Ext.create('Ext.chart.Chart',{ 
     renderTo: Ext.getBody(), 
     width: 500, 
     height: 300, 
     animate : true, 
     insetPadding : 20, 
     theme: 'FancyTheme',

그러나 모든 바 색상 즉, 같은 색으로 변화하고있다 예. 그러나 바는 테마에서 언급 한 바와 같이 바가 다른 색상으로 렌더링되기를 원합니다. 내가 가지고 있지 않은 것은 렌더링 함수로 coloir을 렌더링하고 싶다.

그래서 와트는 다양한 색상을 얻을 수 있습니다. 누구든지 나를 도와 줄 수 있어요 !!

출처

2012-11-29 hsnGunda

죄송 합니다만, 렌더러를 사용하는 것이 올바른 해결책입니다. colors 속성은 동일한 플롯 공간에있는 여러 영역과 같이 차트에서 연속되는 계열에 사용됩니다. 내가 여기 당신이 렌더러를 사용하지 않는 이유를 이해하지 않지만

당신이 할 필요가 전부 :

renderer: function(sprite, record, attr, index, store) { 
    var colors = ['#9CC5C9','#D5544F','#D5544F','#5288DB']; 

    return Ext.apply(attr, { 
     fill: colors[index % colors.length] 
    }); 
}

출처

2012-11-29 18:06:25 Eric

감사합니다. 그리고 더 많은 의심의 여지가 거기에 각 바 색상을 변경하는 테마 또는 모든 구성 옵션에서 할 수있는 일은 무엇입니까 ?? 그럴 경우이 렌더러 함수보다 도움이 될 것입니다. 어쨌든 UR 응답 주셔서 감사합니다. 그것은 나를 도왔다. – hsnGunda

"색인"이 무엇인지 이해하지 못하더라도이 기능이 저에게 효과적이었습니다. 나는 3 개의 누적 된 값을 가지고 있고 인덱스는 0, 1 또는 2가 될 것으로 예상했다. 대신 19325, 25031과 같은 값이 매우 높다. 그렇기 때문에 모듈 연산자를 사용한다. Ext-magic – Jack

또한 Ext.chart.series.Bar을 확장 할 수 있습니다. 예를 들어 :

는

Ext.define('Ext.chart.series.MyBar', { 
    extend: 'Ext.chart.series.Bar', 
    //type: 'mybar', 
    alias: 'series.mybar', 

    getPaths: function() { 
     this.callParent(arguments); 

     var items = this.items, 
      i, iLen = items.length, 
      colors = this.colorArrayStyle, 
      colorsLength = colors && colors.length || 0; 
     for (var i = 0; i < iLen; ++i) { 
      items[i].attr.fill = colors[i % colorsLength]; 
     } 
    } 
});

다음 시리즈에서 당신은 mybar 대신 bar 사용해야합니다.

출처

2012-11-30 08:02:10 Krzysztof

답장을 보내 주셔서 감사합니다. 색상 배열을 전달해야합니까 ?? – hsnGunda

필요가 없습니다. 이것은 당신이 원하는대로 테마에서 가져옵니다. – Krzysztof

ya u r rt !! 감사 :) – hsnGunda

Extjs4 막대 차트의 각 막대 색상 변경

답변

관련 문제