extjs4：如何将自定义侦听器和工具提示添加到图表？

我正在创建一个雷达图来显示数据，它工作得很好。但是，图例中出现的标题可能会非常长。现在我已经在图例中显示了缩短版本的标题，但是我希望这样做，当用户在图例标题上进行鼠标悬停时，会弹出工具提示或泡泡时间，以显示完整的标题/标签。根据我在API文档中看到的，我可以看到您可以将侦听器添加到整个图表，但不仅仅是添加到图例标题。extjs4：如何将自定义侦听器和工具提示添加到图表？

但是，您可以单击图例项目以使数据显示/隐藏，因此存在某种类型的侦听功能。任何想法如何添加一个自定义的鼠标悬停监听器到以下雷达图表的图例？

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); 
}

}）;

来源

2011-06-02 Nathan

如果你想通过说得到这个事件出来，你可以从一系列到图表向上推的图表：

 { 
      '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事件是在另一个contaxt而不是UI上下文中执行的，所以我无法在事件处理程序的上下文中显示一个窗口。我不得不通过使用setTimeout并在某处保存eventobject来解决此问题。我想也许这是因为在某些浏览器上SVG渲染是硬件加速的。

来源

2012-06-28 10:17:22 martyglaubitz

您可以在您的series配置中添加监听器。您可以查看哪些事件可用here。

series: [ 
    { 
     type: 'column', 
     axis: 'left', 
     listeners: { 
      'itemmouseup': function() { 
       //do something 
      } 
     }, 
     xField: 'category', 
     yField: 'data1' 
    } 
]

来源

2011-06-14 21:04:59 rdougan

我看到了这一点，但对将侦听器添加到尚未配置的东西的更大问题感到好奇。就像我之前提到的，图例有一个点击监听器，但不知道如何添加其他类型的监听器。 – Nathan 2011-06-17 03:04:16

extjs4：如何将自定义侦听器和工具提示添加到图表？

回答

相关问题