Question

我有一个非常简单的饼图，我想在其中使用lengthField属性。以下是描述我的问题的小提琴：https://fiddle.sencha.com/#fiddle/hje

总结一下，我有一个空商店的图表，所以在开始时没有显示任何内容。然后我加载一个包含“lenght”字段的商店，该字段绑定到serie的lengthField属性。但是lenghtField完全不起作用。我必须禁用项目（在图例中单击它）才能使其正常工作。

这是与小提琴相同的代码：

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


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

    store: Ext.create('Ext.data.Store', {
        fields: ['name', 'value', 'length'],
        data: []
    }),

    legend: {
        docked: 'bottom'
    },

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


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


Ext.create('Ext.form.Label', {
    html: '<br/><br/>To produce the bug:<br/><br/>' +
          '1 - Change the pie store by clicking on the blue button.<br/>' +
          '2 - As you can see the "lengthField" is not working.<br/>' +
          '3 - Make one item invisible (A-1) for example.<br/>' +
          '4 - See the "lengthField" is working now.<br/><br/>' +
          'Is it possible to make the "lengthField" work, as soon as I bind the store?',
    width: 300,
    height: 300,
    renderTo: Ext.getBody()
});

提前致谢！

EXTJS 5.1非常简单的饼图长度字段

0 个答案: