Question

我有一张图表：

Ext.define('CarboZero.view.PieChart', {
    extend: 'Ext.chart.PolarChart',
    alias: 'widget.piechart',

    requires: [
        'CarboZero.view.override.PieChart'
    ],

    config: {
        animate: false,
        store: 'relativedata',
        colors: [
            '#115fa6',
            '#94ae0a',
            '#a61120',
            '#ff8809',
            '#ffd13e',
            '#a61187',
            '#24ad9a',
            '#7c7474',
            '#a66111',
            '#222222',
            '#115ea6',
            '#94cc0a',
            '#b61120',
            '#dd8809',
            '#11d13e',
            '#a68887',
            '#94df9d',
            '#7f74f4',
            '#112341',
            '#abcdef1'
        ],
        series: [
            {
                type: 'pie',
                renderer: function(sprite, record, attributes, index, store) {

                    if(record.type === 'label')
                    {
                        var total = Ext.getStore('relativedata').getTotal();
                        var name = record.text;
                        var value = Ext.getStore('relativedata').getByName(name);   
                        var ratio = Math.round((value/total)*10000)/100;

                        sprite.labelCfg.text = sprite.labelCfg.text +" : "+ ratio +"%";
                    }
                },
                labelField: 'strName',
                xField: 'numValue'
            }
        ],
        interactions: [
            {
                type: 'rotate'
            }
        ],
        legend: {
            xtype: 'legend',
            docked: 'bottom',
            itemId: 'pie_legend',
            itemTpl: [
                '<tpl if="value != 0">',
                '   <span class="x-legend-item-marker {[values.disabled?\'x-legend-inactive\':\'\']}" style="background:{mark};"></span>{name}',
                '</tpl>'
            ],
            maxItemCache: 100,
            store: 'relativedata'
        },
        listeners: [
            {
                fn: 'onPolarInitialize',
                event: 'initialize'
            }
        ]
    }

});

使用此商店

Ext.define('CarboZero.store.RelativeData', {
    extend: 'Ext.data.Store',
    alias: 'store.relativedata',

    requires: [
        'CarboZero.model.RelativeElement'
    ],

    config: {
        destroyRemovedRecords: false,
        model: 'CarboZero.model.RelativeElement',
        storeId: 'relativedata'
    },

    getTotal: function() {
        var total =0;
        for( var i=0; i<this.getCount();i++)
        {
            total += this.getAt(i).get('numValue');
        }

        return total;
    },

    getByName: function(name) {
        var value;

        for(var i=0;i<this.getCount();i++)
        {
            if(this.getAt(i).get('strName')===name)
            {
                value = this.getAt(i).get('numValue');
                break;
            }

        }
        return value;
    }

});

我使用此功能填充我的商店：

var relStore = Ext.getStore('relativedata');
var eleStore = Ext.getStore('element');
var relModel;
var eleModel;
var boolAdded = false;

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', elementCompute(eleModel));
    if(eleModel.get('numValue')*eleModel.getFactor() >0)
    {
        boolAdded = true;
        relStore.add(relModel);
    }
}

APP.getController('TitleBar').parentToTitle();

//No element had a value superior to 0, nothing is displayed
if(!boolAdded)
{
    APP.getController('PopUp').chartAlert();
}
this.refreshpie(); ///SPECIAL LINE NEEDED

您是否可以看到此商店是本地商店并使用其他商店自行填写。用于填充链接到图表的商店的函数的最后一行是'this.refreshpie（）'，它做了一些魔术，但显然有助于解决我遇到的问题。这是：

pie.sync();
pie.redraw();

如果那些线不存在，则根本不显示任何图表。这是没有意义的，因为.sync应该用于非本地存储......

问题是，我很高兴它能够显示图表......但有一件事我无法理解。

我的图表显示了我的数据树级别，当我转到另一个级别时，商店会更新该级别的节点。

当我进入树中时会发生这种问题

enter image description here

旧数据标签保留在图表上（煤炭，核能），新的数据标签加在上面...... 我检查了商店，它充满了正确的模型，我检查了我在饼图+图表模型中检查的所有内容，并且找不到任何搞砸的东西......

IE。在这张照片中，只显示电力。

有人可以帮助我，sencha触摸图表的黑魔法让我的耐心占了上风。

很高兴知道我是否要旋转图表（交互旋转 - 手势上的程序）标签会重置它们并正确显示......

Answer 1

我们打电话给Serie._label.instances数组arrLabels。

从attributes.serie

中的renderer()获取系列

假设arrLabels中有5个元素。
现在让我们空了，并在此图表的商店中添加3个新元素。
Sencha将使用新数据更新3个第一个单元格，但不会删除现在无用的最后2个单元格。
那些最后的2将出现在图表上，即使它们根本不应该出现在那里。

我的解决方案是仔细检查并将这些元素分割出来arrLabels.slice(index,1)和chart.refresh()。

如果商店包含很多元素，我不会推荐这个解决方案。它会被称为很多。

renderer()实际上是通过精灵调用4次来显示O(4n) ...

另外我们知道你需要检查是否需要显示元素，而不是O(N)。

因此O(n^(4n))约为O(n^n)。

我报错了，sencha团队应该对此做些什么。

错误报告：http://www.sencha.com/forum/showthread.php?270229-Chart-Serie._Label_instances-Updating-is-not-working-properly

Sencha Chart幻影标签随处可见

1 个答案: