Extjs 5.1圖表圖例

Question

我正在使用Ext JS 5.1。

我有一個非常簡單的問題：
我有一個餅圖和一個按鈕。 當我單擊按鈕時，我將新商店綁定到我的圖表。 這很好。 但是，如果我使圖表中的一個元素不可見（通過單擊圖例中的一項）並綁定一個新商店，則位於新商店相同索引處的項目也將不可見。 我不要 有什么辦法可以設置圖表可見的所有內容？

這是Sencha小提琴，可以清楚地解釋我的問題。

還有代碼，如果你很懶！

商店A

var storeA = Ext.create('Ext.data.Store', {
    fields: ['name', 'value'],
    data: [
        {"name": "A-0", "value": 18.34},
        {"name": "A-1", "value": 2.67},
        {"name": "A-2", "value": 1.90}
    ]
});

B店

var storeB = Ext.create('Ext.data.Store', {
    fields: ['name', 'value'],
    data: [
        {"name": "B-0", "value": 4.34},
        {"name": "B-1", "value": 54.67},
        {"name": "B-2", "value": 18.90}
    ]
});

極坐標圖

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',
        colors: ["#9aff4f", "#35b4e3", "#ffb400"],
        donut: 20,
        label: {
            field: 'name',
            display: 'inside'
        },
        highlight: true
    }]
});

按鈕-交換商店

var button = Ext.create('Ext.Button', {
    text: 'Click to change the pie store',
    renderTo: Ext.getBody(),
    margin: '10 10 10 63',
    handler: function() {
        if (donut.getStore() == storeA) {
            donut.bindStore(storeB);
        }
        else {
            donut.bindStore(storeA);
        }
    }
});


Ext.create('Ext.form.Label', {
    html: '<br/><br/>To produce the bug:<br/><br/>' +
          '1 - Make one item invisible by clicking on an item in the legend (A-0 for example).<br/>' +
          '2 - Change the pie store by clicking on the blue button.<br/>' +
          '3 - See with the new store the item at the same index is invisible. I don\'t want that to happen.<br/><br/>' +
          'Is it possible to "enable" (make visible) every items of a pie chart?',
    width: 300,
    height: 300,
    renderTo: Ext.getBody()
});

Answer 1

我接受了您的建議答案，並創建了一個完整的示例。 有關實時演示，請參見Sencha Fiddle ，或參考下面的代碼。

var storeA = Ext.create('Ext.data.Store', {
    fields: ['name', 'value'],
    data: [
        {"name": "A-0", "value": 18.34},
        {"name": "A-1", "value": 2.67},
        {"name": "A-2", "value": 1.90}
    ]
});

var storeB = Ext.create('Ext.data.Store', {
    fields: ['name', 'value'],
    data: [
        {"name": "B-0", "value": 4.34},
        {"name": "B-1", "value": 54.67},
        {"name": "B-2", "value": 18.90}
    ]
});

var donut = Ext.create('Ext.chart.PolarChart', {
    animation: true,
    width: 300,
    height: 300,

    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
    }]
});

Ext.create('Ext.panel.Panel', {
    title : 'Chart Example: Swap Stores',
    renderTo: Ext.getBody(),
    layout: {
        type  : 'vbox',
        pack  : 'center',
        align : 'middle'
    },
    defaults : {
        margin : '8 0',
    },
    items: [donut, {
        xtype: 'label',
        html: 'Is it possible to "disable" (make invisible) items that have no name or 0 as value?<br/>' + 'For example after A-1, I have an "empty" record in my store, but I don\'t want it to be displayed ;)'
    }, {
        xtype: 'button',
        text: 'Click to change the pie store',
        handler: function() {
            if (donut.getStore() == storeA) {
                donut.bindStore(storeB);
            } else {
                donut.bindStore(storeA);
            }

            for (var i = 0; i < donut.legendStore.getCount(); i++) {
                donut.legendStore.getAt(i).set('disabled', false);
            }
        }
    }]
})