无法编辑 Ext 图表中的自定义文本项
Unable to edit custom text items in Ext charts
我有一个用 Ext 制作的图表 js.The 图表有一些自定义文本项。我想动态更改这些 texts.I 希望这些文本组件作为 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
时它起作用了。但仍然导出的图表图像包含旧文本。已更新 Jsfiddle
var txtDraw = Ext.create('Ext.draw.Sprite', {
type:'text',
text : 'Initial Text',
font : '24px Arial',
width : 500,
height: 100,
x:20,
y:20
});
我认为这是一个错误,因为尽管 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,因此永远不会执行代码。一个非常肮脏的解决方法是从外部设置渲染标志。
txtDraw.setAttributes({ 'text':'Jeff'},true )
使用 Ext.draw.Sprite
的 setAttributes 方法
参考 - http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.draw.Sprite-method-setAttributes
我有一个用 Ext 制作的图表 js.The 图表有一些自定义文本项。我想动态更改这些 texts.I 希望这些文本组件作为 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
时它起作用了。但仍然导出的图表图像包含旧文本。已更新 Jsfiddle
var txtDraw = Ext.create('Ext.draw.Sprite', {
type:'text',
text : 'Initial Text',
font : '24px Arial',
width : 500,
height: 100,
x:20,
y:20
});
我认为这是一个错误,因为尽管 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,因此永远不会执行代码。一个非常肮脏的解决方法是从外部设置渲染标志。
txtDraw.setAttributes({ 'text':'Jeff'},true )
使用 Ext.draw.Sprite
的 setAttributes 方法参考 - http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.draw.Sprite-method-setAttributes