ExtJs 当饼图只有一项数据记录占比为100%时tooltip和events无效问题修复
问题描述
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构建,应将此文件放入overrides文件夹内执行
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