javascript - ExtJS - 堆积条形图条件着色

Question

EXTJS 4 - 我正在尝试为 StackedBarChart 中的“系列”自定义渲染器函数。我想有条件地为条形图着色。

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

我的问题是，如何找出它当前呈现的是哪个元素。我想为我的数据存储/系列中每条记录的第一个元素赋予白色。

谢谢。

Answer 1

我找到了一种方法来准确检测当前正在渲染的元素。首先，您需要以下覆盖，它解决了 renderer parameters 的几个问题.它应该不会影响正常的条形图，但我没有测试过。

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 中毫无值(value))
• 添加了第六个参数，用于告知记录中的当前段索引，不计算记录中不属于轴的其他属性。
  示例:对于看起来像 {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;
}