Question

我正在使用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;   
                      }                                               
                }
            }

以下是问题的图片。 image of the issue

正如你所看到的那样，“负面”＆＃39;当鼠标悬停时切片被切断。而且我无法在悬停时删除切片移动动画。这有什么解决方案吗？提前谢谢。

Answer 1

尝试设置 trackMouse：false 代替 trackMouse：true

Ext5：悬停时饼图被切断

1 个答案: