javascript - Extjs 5.1 图表图例

Question

我正在使用 Ext JS 5.1。

我有一个非常简单的问题:
我有一个饼图和一个按钮。当我单击该按钮时，我将一个新商店绑定(bind)到我的图表。这很好用。但是，如果我使图表中的一个元素不可见(通过单击图例中的一项)并绑定(bind)一个新商店，则新商店同一索引处的项目也将不可见。我不想要这样。有没有办法设置图表的所有可见内容？

这是Sencha Fiddle清楚地解释我的问题。

如果你懒的话，还有代码!

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