无法编辑Ext图表中的自定义文本项

Unable to edit custom text items in Ext charts

本文关键字：自定义文本编辑 Ext 更新时间：2023-09-26

我有一张用Ext-js制作的图表。图表中有一些自定义文本项。我想动态地更改这些文本。我想要这些文本组件作为svg的一部分，因为图表的导出图像也应该包含这些自定义文本。JSFiddle

Ext.onReady(function() {
    Ext.define("PopulationPoint", {
        extend: "Ext.data.Model",
        fields: [ "state", "population" ]
    });
    var a = Ext.create("Ext.draw.Text", {
        type: "text",
        text: "Initial Text",
        font: "24px Arial",
        width: 500,
        height: 100,
        x: 20,
        y: 20
    });
    var b = Ext.create("Ext.data.Store", {
        model: "PopulationPoint",
        data: [ {
            state: "Alabama",
            population: 4802740
        }, {
            state: "Alaska",
            population: 722718
        }, {
            state: "Arizona",
            population: 6482505
        }, {
            state: "Arkansas",
            population: 2937979
        }, {
            state: "California",
            population: 37691912
        }, {
            state: "Colorado",
            population: 5116796
        }, {
            state: "Connecticut",
            population: 3580709
        }, {
            state: "Delaware",
            population: 907135
        }, {
            state: "DC",
            population: 617996
        } ]
    });
    Ext.create("Ext.chart.Chart", {
        renderTo: Ext.getBody(),
        width: 470,
        height: 400,
        store: b,
        items: [ a ],
        series: [ {
            type: "pie",
            field: "population",
            label: {
                field: "state",
                display: "outside",
                font: "12px Arial"
            }
        } ]
    });
    setInterval(function() {  
        a.setText("NewText"); // This statement has no use
    }, 3e3);
 });

有人知道怎么解决这个问题吗？提前谢谢。

更新

当我使用Ext.draw.Sprite而不是Ext.draw.Text时，它就起作用了。但图表的导出图像仍然包含旧文本。更新Jsfidle

var txtDraw =  Ext.create('Ext.draw.Sprite', {
    type:'text',
    text  : 'Initial Text',
    font  : '24px Arial',
    width : 500,
    height: 100, 
    x:20,
    y:20
});

txtDraw.setAttributes({ 'text':'Jeff'},true )

使用Ext.draw.Sprite 的setAttributes方法

参考-http://docs.sencha.com/extjs/4.1.3/#/api/Ext.draw.Sprite-method-setAttributes

我认为这是一个错误，因为尽管setText方法显示了一个合理的代码：

setText: function(text) {
    var me = this,
        surface,
        sprite;
    if (me.rendered) {
        surface = me.surface;
        sprite = surface.items.items[0];
        me.text = text || '';
        surface.remove(sprite);
        me.textConfig.type = 'text';
        me.textConfig.text = me.text;
        sprite = surface.add(me.textConfig);
        sprite.setAttributes({
            rotate: {
                degrees: me.degrees
            }
        }, true);
        if (me.autoSize || me.viewBox) {
            me.updateLayout();
        }
    } else {
        me.on({
            render: function() {
                me.setText(text);
            },
            single: true
        });
    }
}

问题是文本精灵永远不会被渲染，me.rendered保持为false，因此代码永远不会被执行。一个非常糟糕的解决方法是从外部设置渲染标志。