Extjs改變堆疊條形圖中條形的顏色

我們拿this example ...如何改變這些條形的顏色？Extjs改變堆疊條形圖中條形的顏色

我知道我可以通過渲染器改變它，但它不會改變圖例。

我曾嘗試使用：

style: {fill: 'red'}

但永遠禁止

我試圖把顏色陣列，它不工作就改變顏色。

我試圖把每一種風格的陣列，像這樣：

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

但它不會工作，因爲我可以把職稱的陣列，如：

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

我想它（樣式）應該工作，但不是。

那麼如何更改每個「數據」欄的顏色？

來源

2011-06-15 Nazin

條的顏色實際上是由chart's theme確定：

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

爲了使用自定義顏色，則需要擴展現有的「基地」的主題，如custom area chart example。

來源

2011-06-15 20:39:55 NT3RP

非常感謝！它工作正常 – Nazin 2011-06-16 10:58:35

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可以改變顏色。

來源

2012-11-28 11:28:06

圖表使用主題爲混入

這樣你就可以直接使用主題屬性稱爲themeAttrs。

例如，如果你在列/堆積柱形圖的構造，想改變列的顏色可以指定

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

來源

2013-03-28 10:36:09 Sandesh

我決定加入全碼：

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); 
    }, 
...

來源

2013-05-10 00:31:02 user2368285

如果您不想使用主題，你可以用這個（至少對我有效）：

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有時是一個很愚蠢的框架）。

來源

2013-12-03 14:41:36 toni07

我使用的是Ext JS 5.0 有沒有必要擔心，只需在系列中包含顏色配置。

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

來源

2014-12-31 13:33:36

Extjs改變堆疊條形圖中條形的顏色

回答

相關問題