javascript - EXTJS 5 图表中不显示空记录

Question

首先:这是清楚解释我的问题的 fiddle :https://fiddle.sencha.com/#fiddle/hgm

总而言之，我有一个绑定(bind)到商店的非常简单的图表。该商店几乎没有“空”记录，如下所示:

var storeA = Ext.create('Ext.data.Store', {
    fields: ['name', 'value', 'length'],
    data: [
        {"name": "A-0", "value": 18.34, "length": 30},
        {"name": "A-1", "value": 2.67, "length": 35},
        {"name": "", "value": 0, "length": 0} // this is what I call an empty record
    ]
});

我的饼图非常简单:

var donut = Ext.create('Ext.chart.PolarChart', {
    title: 'Test',
    animation: true,
    width: 300,
    height: 300,
    renderTo: Ext.getBody(),

    store: storeA,

    legend: {
        docked: 'bottom'
    },

    series: [{
        type: 'pie',
        angleField: 'value',
        lengthField: 'length',
        colors: ["#9aff4f", "#35b4e3", "#ffb400"],
        donut: 20,
        label: {
            field: 'name',
            display: 'inside'
        },
        highlight: true
    }]
});

但我希望空记录不会像实际那样出现在图例中:

我想补充一点，我不想在将商店交给图表之前对其进行清理。我需要使用这家完全相同的商店。

Answer 1

Ext 没有“空记录”的概念，因此它只是获取在商店中找到的所有内容并将其绘制在图表上。您可以通过覆盖图表在商店和图表之间插入自定义逻辑，或者需要在绑定(bind)之前“清理”商店。