【发布时间】：2015-07-10 10:24:05
【问题描述】：
我正在使用 Ext5 饼图。 当我将鼠标悬停在饼图上时，它被切断了。
饼图的代码如下。
{
type: 'pie',
field: 'item1',
renderer: function(sprite, config, rendererData, index) {
var record = rendererData.store.getAt(rendererData.series.sprites.indexOf(sprite));
var name = record.get('name');
if(chartObj.baseThemeColors[name]){
var color = chartObj.baseThemeColors[name];
} else {
color = chartObj.getRandomColor();
chartObj.baseThemeColors[name] = color;
}
return Ext.apply(rendererData, {
fill: color
});
return rendererData;
},
subStyle: {
strokeStyle: 'white',
insertPadding: '50',
lineWidth: '0.5'
},
highlight: {
segment: {
margin: 20
}
},
tooltip: {
trackMouse: true,
width: 'auto',
height: 40,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
var idType = storeItem.get('type');
chartStore.each(function(rec) {
total += rec.get('item1');
});
if(storeItem.get('item1') == 0){
this.setTitle('');
}else {
var pct = ((storeItem.get('item1')/total) * 100).toFixed(0);
var tipText = pct + '% (' + storeItem.get('item1') + ' of ' + total + ')<br/>' + storeItem.get('name')
this.setTitle(tipText);
}
}
},
label: {
field: 'name',
display: 'rotate',
font: '14px Arial',
renderer: function(text, sprite, config, rendererData, index){
var item = rendererData.store.getAt(index);
var total = 0,
idType = item.get('type'),
labelText = "";
chartStore.each(function(rec) {
total += rec.get('item1');
});
if(item.get('item1') == 0){
labelText = '';
} else {
var pct = ((item.get('item1') / total) * 100).toFixed(0);
if(pct>1){
labelText = text + ' ' + pct+'%';
} else {
labelText = '';
}
}
return labelText;
}
}
}
这是问题的图片。
正如您所见，当鼠标悬停时，“负”切片的顶部被切断。而且我无法在悬停时删除该切片移动动画。 有什么解决办法吗？ 提前致谢。
【问题讨论】：
-
检查浏览器开发者工具(F12)，包含饼图的元素可能高度有限？？？。尝试给元素溢出：可见或增加高度。我想它会解决你问题。