extjs4：如何添加自定义侦听器&；图表的工具提示？

我正在创建一个雷达图来显示数据，它工作得很好。但是，图例中出现的标题可能非常长。现在我有它显示一个缩短版本的标题在图例中，但我希望这样当用户鼠标悬停在一个图例标题上时，一个工具提示或弹出一段时间的气泡，显示完整的标题/标签。从我在API文档中看到的，我可以看到您可以在整个图表中添加一个侦听器，但不仅仅是在图例标题上

但是，您可以单击图例项以显示/隐藏数据，因此有某种类型的侦听功能。有没有办法在下面的雷达图表中添加一个自定义鼠标悬停侦听器

Ext.define("COM.view.portlet.RadarChart", {
extend  : "Ext.panel.Panel",
alias   : "widget.myradarchart",
requires: ["Ext.chart.theme.Base", "Ext.chart.series.Series"],

initComponent: function () {
    //@fixme: Why is the first radar not show x-axis lines?
    Ext.apply(this, {
        layout: "fit",
        width: 600,
        height: 300,
        items: {
            xtype: 'chart',
            style: 'background:#fff',
            theme: 'Category2',
            insetPadding: 20,
            animate: true,
            store: 'Seoradar',
            legend: {
                position: "bottom"
                //ADDING LISTENERS HERE DOESN'T WORK
            },
            axes: [{
                type: "Radial",
                position: "radial",
                maximum: 100,
                label: {
                    font: "11px Arial",
                    display : "none"
                }
            }],
            series: [{
                showInLegend    : true,
                showMarkers     : true,
                markerConfig: {
                    radius  : 2,
                    size    : 2
                },
                type    : 'radar',
                xField  : 'name',
                yField  : 'site0',
                style: {
                    opacity: 0.4
                }
            },{
                showInLegend    : true,
                showMarkers     : true,
                type            : 'radar',
                xField          : 'name',
                yField          : 'site1',
                style: {
                    opacity: 0.4
                }
            }]
        }
    });
    this.callParent(arguments);
}

---

}))

您可以在

系列

配置中添加侦听器。您可以查看哪些事件可用

---

如果你想让这个事件从图表中消失，你可以从这个系列中把它往上推 对图表说：

       {
            'type' : 'line',
            'axis' : 'left',
            'highlight' : true,
            'listeners' : {
                'itemmousedown' : function(event){
                    event.series.chart.fireEvent('itemmousedown', event);
                }
            }
       }

因此，在控制器中，您可以说：

this.control({
    'chart' : {
         'itemmousedown' : function(event){
             //do your stuff here
         }
    }
});

！！注意

我注意到那些mousedown事件是在UI上下文之外的另一个contaxt中执行的，因此我无法在事件处理程序的上下文中显示窗口。 我必须通过使用setTimeout并将eventobject保存到某个地方来解决这个问题。

---

我想这可能是因为在某些浏览器上，SVG渲染是硬件加速的。

我看到了这一点，但对向尚未配置的内容添加侦听器这一更大的问题感到好奇。正如我所提到的，图例有一个单击侦听器，但不知道如何添加其他类型的侦听器。

this.control({
    'chart' : {
         'itemmousedown' : function(event){
             //do your stuff here
         }
    }
});