將自定義圖表欄顏色標記爲EXT JS中的圖例5

在EXTJS 5圖表中使用自定義圖例顏色時出現問題。我可以將自定義顏色應用於圖表圖例，但我無法將其應用於圖例項目。在EXT JS 4中，我可以使用一個覆蓋函數來處理它。像將自定義圖表欄顏色標記爲EXT JS中的圖例5

getLegendColor: function(index) { 
    var proSpeciality = ["#EFD07B","#0082AD"]; 
    return proSpeciality[index]; 
}

但是，這是不是在EXT JS 5

示例代碼可用。

Ext.create('Ext.Container', { 
renderTo: Ext.getBody(), 
width: 600, 
height: 400, 
layout: 'fit', 
items: { 
    xtype: 'cartesian', 
    store: { 
     fields: ['name', 'value','value2'], 
     data: [ 
      {name: 'metric one', value: 10,value2: 15}, 
      {name: 'metric two', value: 7,value2: 15}, 
      {name: 'metric three', value: 5,value2: 15}, 
      {name: 'metric four', value: 2,value2: 15}, 
      {name: 'metric five', value: 27,value2: 15} 
     ] 
    }, 
    axes: [{ 
     type: 'numeric', 
     position: 'left', 
     title: { 
      text: 'Sample Values', 
      fontSize: 15 
     }, 
     fields: 'value' 
    }, { 
     type: 'category', 
     position: 'bottom', 
     title: { 
      text: 'Sample Values', 
      fontSize: 15 
     }, 
     fields: 'name' 
    }], 
     legend: { 
      docked: 'top', 
      style: { 
       stroke: '#ffffff', 
       'stroke-width': 2, 
       opacity: 1 
      }, 
      tpl: [ 
       '<tpl for=".">    ', 
       '    <div class="myLegendItem" style="float:left;margin:5px;padding:0px;cursor:pointer;">', 
       '      <div class="" style="float:left;margin:2px;width:12px;height: 12px; background:{mark};"></div><div style="float:left;">{name}</div>          ', 
       '    </div>     ', 
       '   </tpl>' 
      ], 
      itemSelector: '.myLegendItem' 
     }, 
    series: { 
     type: 'bar', 
     xField: ['name'], 
     yField: ['value','value1'], 
     stacked: false, 
     renderer: function(sprite, record, attributes, index, store) { 
          var proSpeciality = ["#EFD07B","#0082AD","#00A67B","#AD1808","#520084"]; 
          attributes.fill = proSpeciality[index % proSpeciality.length]; 
          return attributes; 
         }, 
     getLegendColor: function(index) { 
        var proSpeciality = ["#EFD07B","#0082AD"]; 
        return proSpeciality[index]; 
     } 
    } 

}

}）;

enter image description here

請讓我知道，如果我需要改變一些東西。

在此先感謝

來源

2014-10-10 Isha John

嘗試使用「顏色」屬性系列中：

series: { 
    type: 'bar', 
    colors: ['orange', 'yellow'], 
    ... 
}

例子：https://fiddle.sencha.com/#fiddle/bk1

來源

2014-10-10 11:39:44

這是不錯的選擇。但我有一個快速的問題。在某些情況下，我需要動態地傳遞顏色代碼。因此，我將使用顏色代碼的全球陣列。它將根據用戶選擇而改變。所以我不能硬編碼。 – 2014-10-10 11:50:59

這是一個很好的問題，但不幸的是我不知道答案。讓我知道你是否會最終找到解決方法。 – 2014-10-10 12:15:34

最後我得到了解決方案。我在tpl中添加了一個函數。 whick會根據索引返回顏色。 – 2014-10-10 14:32:09

回答有關 '全球彩色陣列' 的問題（我不能答案在評論部分 - 沒有足夠的聲望，Aleksei Mialkin在他的解決方案中是非常正確的），你可以使用單例來保存這些值

Ext.define("MyApp.colours", { 
    singleton: true, 
    COL1: 'orange', 
    COL2: 'red', 
    COL3: 'blue', 
    COL4: 'green' 
});

然後引用作爲

... 
    colors: [MyApp.colours.COL1, MyApp.colours.COL2], 
    ...

來源

2014-10-23 13:32:42

將自定義圖表欄顏色標記爲EXT JS中的圖例5

回答

相關問題