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：如何將自定義偵聽器和工具提示添加到圖表？

回答

相關問題