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论坛询问了这件事，但无济于事。