我有一张图表：
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 应该用于非本地存储......
问题是，我很高兴它可以显示图表......但有一点我无法理解。
我的图表显示了我的数据树的一个级别，当我转到另一个级别时，商店会使用该级别中的节点进行更新。
发生的事情是，当我上树时，会发生这种问题
旧数据标签保留在图表上（煤炭、核能），新的数据标签被添加到它上面……我检查了商店，里面装满了正确的模型，我检查了我可以在饼图模型中检查的所有内容，但不能发现什么乱七八糟的...
IE。在这张图片中，应该只显示电力。
有人能帮帮我吗，煎茶触摸图表的黑魔法让我的耐心占了上风。
很高兴知道我是否要对图表进行旋转（交互旋转 - 在手势上进行）标签会自行重置并正确显示......