ExtJS - 堆疊條形圖有條件着色

Question

EXTJS 4 - 我試圖爲StackedBarChart中的'series'定製渲染函數。我想有條件地爲條形上色。

renderer: function(sprite, record, curAttr, index, store) { 
         return Ext.apply(curAttr, { 
           fill: color 
         }); 
         return curAttr; 
}, 

我的問題是，如何找出它當前呈現哪個元素。我想給我的數據存儲/系列中每個記錄的第一個元素賦予白色。

謝謝。

Answer 1

我找到了一種方法來檢測到目前正在呈現哪個元素。首先，您需要下面的覆蓋，它解決​​的幾個問題。它不應該影響正常的條形圖，但我沒有測試它們。

Ext.override(Ext.chart.series.Bar,{ 
    drawSeries: function() { 
     var me = this, 
      chart = me.chart, 
      store = chart.getChartStore(), 
      surface = chart.surface, 
      animate = chart.animate, 
      stacked = me.stacked, 
      column = me.column, 
      enableShadows = chart.shadow, 
      shadowGroups = me.shadowGroups, 
      shadowGroupsLn = shadowGroups.length, 
      group = me.group, 
      seriesStyle = me.seriesStyle, 
      items, ln, i, j, baseAttrs, sprite, rendererAttributes, shadowIndex, shadowGroup, 
      bounds, endSeriesStyle, barAttr, attrs, anim; 

     // ---- start edit ---- 
     var currentCol, currentStoreIndex; 
     // ---- end edit ---- 


     if (!store || !store.getCount()) { 
      return; 
     } 

     //fill colors are taken from the colors array. 
     delete seriesStyle.fill; 
     endSeriesStyle = Ext.apply(seriesStyle, this.style); 
     me.unHighlightItem(); 
     me.cleanHighlights(); 

     me.getPaths(); 
     bounds = me.bounds; 
     items = me.items; 

     baseAttrs = column ? { 
      y: bounds.zero, 
      height: 0 
     } : { 
      x: bounds.zero, 
      width: 0 
     }; 
     ln = items.length; 
     // Create new or reuse sprites and animate/display 
     for (i = 0; i < ln; i++) { 
      sprite = group.getAt(i); 
      barAttr = items[i].attr; 

      if (enableShadows) { 
       items[i].shadows = me.renderShadows(i, barAttr, baseAttrs, bounds); 
      } 

      // ---- start edit ---- 
      if (stacked && items[i].storeItem.index != currentStoreIndex) { 
       //console.log("i: %o, barsLen: %o, j: %o, items[i]: %o",i,bounds.barsLen,i/bounds.barsLen,items[i]); 
       currentStoreIndex = items[i].storeItem.index; 
       currentCol = 0; 
      } 
      else { 
       ++currentCol; 
      } 
      // ---- end edit ---- 

      // Create a new sprite if needed (no height) 
      if (!sprite) { 
       attrs = Ext.apply({}, baseAttrs, barAttr); 
       attrs = Ext.apply(attrs, endSeriesStyle || {}); 
       sprite = surface.add(Ext.apply({}, { 
        type: 'rect', 
        group: group 
       }, attrs)); 
      } 
      if (animate) { 
       // ---- start edit ---- 
       rendererAttributes = me.renderer(sprite, items[i].storeItem, barAttr, (stacked? currentStoreIndex : i), store, (stacked? currentCol : undefined)); 
       // ---- end edit ---- 
       sprite._to = rendererAttributes; 
       anim = me.onAnimate(sprite, { to: Ext.apply(rendererAttributes, endSeriesStyle) }); 
       if (enableShadows && stacked && (i % bounds.barsLen === 0)) { 
        j = i/bounds.barsLen; 
        for (shadowIndex = 0; shadowIndex < shadowGroupsLn; shadowIndex++) { 
         anim.on('afteranimate', function() { 
          this.show(true); 
         }, shadowGroups[shadowIndex].getAt(j)); 
        } 
       } 
      } 
      else { 
       // ---- start edit ---- 
       rendererAttributes = me.renderer(sprite, items[i].storeItem, Ext.apply(barAttr, { hidden: false }), (stacked? currentStoreIndex : i), store, (stacked? currentCol : undefined)); 
       // ---- end edit ---- 
       sprite.setAttributes(Ext.apply(rendererAttributes, endSeriesStyle), true); 
      } 
      items[i].sprite = sprite; 
     } 

     // Hide unused sprites 
     ln = group.getCount(); 
     for (j = i; j < ln; j++) { 
      group.getAt(j).hide(true); 
     } 
     // Hide unused shadows 
     if (enableShadows) { 
      for (shadowIndex = 0; shadowIndex < shadowGroupsLn; shadowIndex++) { 
       shadowGroup = shadowGroups[shadowIndex]; 
       ln = shadowGroup.getCount(); 
       for (j = i; j < ln; j++) { 
        shadowGroup.getAt(j).hide(true); 
       } 
      } 
     } 
     me.renderLabels(); 
    } 
}); 

下面是renderer()更改列表：

• 第二個參數是現在映射到正確的存儲項
• 現在的第四個參數是存儲索引號，而不是內部的項目編號（毫無價值的其他IMO）
• 增加了第六個參數，用於指示記錄中的當前段索引，而不包括記錄中不屬於該軸的其他屬性。
  示例：看起來像{name: 'metric': segment1: 12, segment2: 22}的記錄，爲segment1該指數將0代替1，因爲在唱片中的第一項不屬於它的軸（它的類別名稱）

所以，回答你的問題，現在你可以使用渲染器，像這樣：

renderer: function(sprite, record, attr, storeIndex, store, col) { 
    // set the color to white for the first item in every record 
    return (col == 0)? Ext.apply(attr, { fill: '#fff' }) : attr; 
} 

如果你想設置的顏色命名的項目，你還可以做這樣的：

// let's say that every record looks like this: 
// {name: 'metric one', user1: 23, user2: 50, user3: 10} 

renderer: function(sprite, record, attr, storeIndex, store, col) { 
    // retrieve the segment property name from the record using its numeric index. 
    // remember that 'col' doesn't take into account other fields that don't 
    // belong to the axis, so in this case we have to add 1 to the index 
    var uid = Ext.Object.getAt(record.data, col+1)[0]; 

    // set the color to red for 'user2' 
    return (uid == 'user2')? Ext.apply(attr, { fill: '#f00' }) : attr; 
} 

等待最後的一個，你需要這個功能，它允許您使用數字索引來檢索對象的屬性：

/** 
* Returns the key and its value at the idx position 
* @return {Array} Array containing [key, value] or null 
*/ 
Ext.Object.getAt = function(obj, idx) { 
    var keys = Ext.Object.getKeys(obj); 
    if (idx < keys.length) { 
     return [keys[idx],obj[keys[idx]]]; 
    } 
    return null; 
} 

Answer 2

索引告訴你哪個元素正在渲染。但我注意到，在某些情況下，在元素開始處理之前，renderer（）會被調用3次。我在Sencha論壇詢問了這件事，但無濟於事。