ExtJs 케이크 그림에 데이터 기록이 100%일 때 tooltip과 이벤트가 잘못되었습니다.
ExtJs 케이크 그림에 데이터 기록이 100%일 때 tooltip과 이벤트가 잘못되었습니다.
문제 설명
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'number'],
data: [{
'name': 'Homer',
"number": 100
}]
});
Ext.create({
xtype: 'panel',
layout: {
type: 'vbox'
},
items: [{
xtype: 'polar',
store: store,
insetPadding: 20,
innerPadding: 20,
legend: {
docked: 'bottom'
},
interactions: ['rotate'],
series: [{
type: 'pie',
label: {
display: 'outside',
field: 'name'
},
xField: 'number',
tooltip: {
style: 'background: #fff',
renderer: function(storeItem, item) {
this.setHtml('test');
}
}
}],
width: '100%',
height: 300
}],
width: 500,
height: 600,
renderTo: Ext.getBody()
});
데이터 기록이 하나뿐이고 케이크 그림이 100%일 때 tooltip이 표시되지 않으며 itemclick 이벤트가 잘못되었습니다. 프레젠테이션 주소:https://fiddle.sencha.com/#fiddle/c42&view/editor
해결 방법
케이크 그림을 다시 쓰는 betweenAngle 방법입니다. Sencha Cmd로 구축하면 이 파일을 오버라이드 폴더에 넣고 실행해야 합니다
sencha app refresh
Ext.define('overrides.chart.Pie', {
override: 'Ext.chart.series.Pie',
betweenAngle: function(x, a, b) {
if (a === 0 && b > (Math.PI*2-0.00000001)) {
return true;
} else {
var pp = Math.PI * 2,
offset = this.rotationOffset;
if (!this.getClockwise()) {
x *= -1;
a *= -1;
b *= -1;
a -= offset;
b -= offset;
} else {
a += offset;
b += offset;
}
b -= a;
x -= a;
x %= pp;
b %= pp;
x += pp;
b += pp;
x %= pp;
b %= pp;
return x < b;
}
}
});
수정된 효과 데모 주소:https://fiddle.sencha.com/#fiddle/jjq&view/editor