extjs - 图例模板 - 图表

Question

我得到了这个模板(默认)

<span class="x-legend-item-marker {[values.disabled?'x-legend-inactive':'']}" style="background:{mark};"></span>{name}

产生这个:



我想拥有与它的每一个功能相同的模板。但是，我还需要一个 if 子句。如果一个项目的值为 0，我不希望它被“传奇化”。

这是完整的代码

{
xtype: 'container',
                title: 'Chart',
                iconCls: 'chart',
                itemId: 'chart_Tab',
                layout: {
                    type: 'fit'
                },
                items: [
                    {
                        xtype: 'polar',
                        itemId: 'pie',
                        colors: [
                            '#115fa6',
                            '#94ae0a',
                            '#a61120',
                            '#ff8809',
                            '#ffd13e',
                            '#a61187',
                            '#24ad9a',
                            '#7c7474',
                            '#a66111',
                            '#222222',
                            '#115ea6',
                            '#94cc0a',
                            '#b61120',
                            '#dd8809',
                            '#11d13e',
                            '#a68887',
                            '#94df9d',
                            '#7f74f4',
                            '#112341',
                            '#abcdef1'
                        ],
                        store: 'relativedata',
                        series: [
                            {
                                type: 'pie',
                                label: {
                                    textBaseline: 'middle',
                                    textAlign: 'center',
                                    font: '9px Helvetica'
                                },
                                labelField: 'strName',
                                labelOverflowPadding: 0,
                                xField: 'numValue'
                            }
                        ],
                        interactions: [
                            {
                                type: 'rotate'
                            }
                        ],
                        listeners: [
                            {
                                fn: function(element, eOpts) {
                                    var relStore = Ext.getStore('relativedata');
                                    var eleStore = Ext.getStore('element');
                                    var relModel;
                                    var eleModel;

                                    relStore.removeAll();

                                    //Convert to CO2 qty
                                    for(var i = 0; i< eleStore.getCount();i++)
                                    {
                                        eleModel = eleStore.getAt(i);
                                        relModel = Ext.create(APPNAME + '.model.RelativeElement');
                                        relModel.set('strName',eleModel.get('strName'));
                                        relModel.set('numValue', eleModel.get('numValue')*eleModel.getFactor());
                                        relStore.add(relModel);
                                    }

                                    relStore.sync();

                                    //Hide arrows-legend
                                    this._series[0]._label.attr.hidden=true;
                                },
                                event: 'painted'
                            }
                        ],
                        legend: {
                            xtype: 'legend',
                            docked: 'bottom',
                            itemId: 'pie_legend',
                            itemTpl: [
                                '<span class="x-legend-item-marker {[values.disabled?\'x-legend-inactive\':\'\']}" style="background:{mark};"></span>{name}'
                            ],
                            maxItemCache: 100,
                            store: 'element'
                        }
                    }
                ]
            }

我寻求帮助是因为我对模板不太擅长。我不敢说我​​实际上了解默认的一切。

Answer 1

我回来了!然而，没有人因此而称我为 slim 的黑幕……不幸的是!

因此，要回答您最初的问题，您需要的模板如下所示:

// Configuration of the chart legend
legend: {
    // Finally, we can use the value field to customize our templates.
    itemTpl: [
        '<tpl if="value != 0">', // <= template condition
            '<span class="x-legend-item-marker {[values.disabled?\'x-legend-inactive\':\'\']}" style="background:{mark};"></span>{name}',
        '</tpl>'
    ]
    // ...
}

不幸的是，正如我在之前的评论中所说，快速调试器检查表明，这 value在应用此模板时，变量或任何等效项不可用。

现在我将详细解释我是如何克服这种烦恼的。部分是因为这是一个如此复杂的黑客，如果你决定应用它，你最好知道你在做什么，部分是因为你会通过亲眼目睹钓鱼技术学到更多的东西，而不是被赋予正确的鱼离开——在这种情况下，鱼无论如何都不能零售。而且在很大程度上，我必须承认，因为我喜欢对我投入了一些精力的事情进行抒情，而且已经很晚了，我对自我祝贺的防御变得有点弱......

所以，看看 Ext.chart.Legend 的代码表明那里没有什么可做的，它只是 Ext.dataview.Dataview 的一个轻量级扩展。 .因此，它必须有一个绑定(bind)到它的存储，显然(不幸的是)它不是绑定(bind)到图表以提供其数据的存储。

另一个明智的断点(在 Legend 的 setStore 方法中)显示此存储来自 Ext.chart.AbstractChart ，并在 code of this class我们可以看到两件事:一个专门的传奇商店是 created in the constructor , 和 chart series implement a method to feed this store ，即 provideLegendInfo .

我们越来越接近我们的目标。我们需要做的是向图例存储添加一个值字段，并让我们的系列为该字段提供数据。伟大的!

现在明智的做法是用最少的 Ext 代码复制来实现这些修改......但是在花费了 inconsiderate amount of time 之后在没有运气的情况下尝试这样做，我将满足于疯狂地覆盖这两种方法，并建议放置一个大粗体警告以检查这些方法的代码是否不会随着 Touch 的下一个版本而改变:

if (Ext.getVersion().isGreaterThan('2.2.1')) {
    // Give yourself a big warning to check that the overridden methods' code
    // bellow has not changed (see further comments).
}

有了这些，让我们直奔主题，不再考虑后代。

也就是说，首先我们在图例存储中添加一个值字段:

/**
 * Adds a value field to legend store.
 */
Ext.define(null, {
    override: 'Ext.chart.AbstractChart'
    // Berk, what a lot of code replication :( Let's just hope that this method's code
    // won't change in the future...
    ,constructor: function() {
        var me = this;
        me.itemListeners = {};
        me.surfaceMap = {};
        me.legendStore = new Ext.data.Store({
            storeId: this.getId() + '-legendStore',
            autoDestroy: true,
            fields: [
                'id', 'name', 'mark', 'disabled', 'series', 'index'
                // Adding my value field
                ,'value'
            ]
        });
        me.suspendLayout();

        // For whatever reason, AbstractChart doesn't want to call its superclass
        // (Ext.draw.Component) constructor and, by using callSuper, skips directly to
        // Ext.Container's one. So well... I respect, but I must do it old school since
        // callSuper would go to Ext.draw.Component from here.
        Ext.Container.prototype.constructor.apply(this, arguments);
        // me.callSuper(arguments);

        me.refreshLegendStore();
        me.getLegendStore().on('updaterecord', 'onUpdateLegendStore', me);
        me.resumeLayout();
    }
}, function() {
    // Post-create functions are not called for overrides in touch as they are 
    // in ExtJS? Hmm... That would have been the perfect place to issue a big
    //  warning in case the version has changed, but we'll live with it :(
});

其次，我们让我们的图表系列提供该值。从你的代码中，我可以推断出你正在使用饼图，所以我只是给出代码，作为说明......但是，如果你一直遵循到这里，它应该是微不足道的为其他类型的系列实现它。无论如何，这是代码:

/**
 * Overrides `provideLegendInfo` to add the value to the legend records.
 *
 * Here again, let us all cross our fingers very hard, hoping for Sencha's team to not decide
 * to add their own extra fields too soon...
 */
Ext.define(null, {
    override: 'Ext.chart.series.Pie'
    ,provideLegendInfo: function(target) {
        var store = this.getStore();
        if (store) {
            var items = store.getData().items,
                labelField = this.getLabelField(),
                field = this.getField(),
                hidden = this.getHidden();
            for (var i = 0; i < items.length; i++) {
                target.push({
                    name: labelField ? String(items[i].get(labelField))  : field + " " + i,
                    mark: this.getStyleByIndex(i).fillStyle || this.getStyleByIndex(i).strokeStyle || 'black',
                    disabled: hidden[i],
                    series: this.getId(),
                    index: i
                    // Providing actual data value to the legend record
                    ,value: items[i].get(field)
                });
            }
        }
    }
});

让我们总结一下。我们有两个覆盖和一个自定义模板。我们可以希望我们现在已经完成了。但这是我们得到的:



所以， DataView在 itemTpl 周围添加一些自己的标记的标记。好吧，好吧，好吧……在这一点上，我已经厌倦了跟踪 Ext 的内部结构，幸运的是(这一次!)，我设想了一个快速补丁。因此，我毫不犹豫地将这条 CSS 规则放入:

.x-legend-item:empty {
    display: none;
}

最后我们完成了。我想我的思路和代码可能有点难以复制，所以让我为您提供 definitive proof这一切都有效。

在这个演示中，有一个值为 0 的“公制四”。

{
    'name': 'metric four',
    'data': 0
}

但你不会看到它。因为这就是这一切的重点，不是吗？