extjs4: ¿Cómo agregar listener personalizado y información sobre herramientas a un gráfico?

Question

Estoy creando un gráfico de radar para mostrar datos y funciona muy bien. Sin embargo, los títulos que aparecen en la leyenda pueden ser extremadamente largos. Ahora mismo tengo que mostrar una versión abreviada del título en la leyenda, pero me gustaría que por lo que cuando el usuario hace un ratón encima de un título de leyenda, un texto de ayuda o de algún tiempo de la burbuja emergente que muestra el título completo/etiqueta. Según lo que veo en los documentos de la API, puedo ver que puedes agregar un oyente a todo el gráfico, pero no solo a los títulos de las leyendas.

Puede sin embargo clic en un elemento de leyenda para que los datos mostrar/ocultar, así que hay algún tipo de funcionalidad de escuchar. ¿Alguna idea de cómo puedo agregar un detector de mouseover personalizado a la leyenda de la siguiente tabla de radar?

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

});

Answer 1

Si desea obtener este evento fuera de la tabla puedes empuje hacia arriba de la serie a la carta diciendo:

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

por lo que en su controlador se puede decir:

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

!! ATENCION !!

Me di cuenta de que esos eventos de mouse se ejecutan en otro contacto que el contexto de la interfaz de usuario, por lo que no pude mostrar una ventana en el contexto del controlador de eventos. Tuve que trabajar en esto usando setTimeout y guardando el eventobject en alguna parte. Creo que esto se debe a que en algunos navegadores SVG Rendering es hardware acelerado.

Answer 2

Puede añadir detectores en la configuración de series. Puede ver qué eventos están disponibles here.

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