ExtJS Cómo agregar un evento de clic a las piezas del gráfico circular

Question

He creado un gráfico circular usando el ejemplo del gráfico circular en el sitio web sencha ExtJS, quería agregar un evento de clic a cada sector Pie para poder manejar el contexto datos en esa porción. Pude agregar un oyente de clic al pastel, pero no estoy seguro de cómo obtener los datos en el sector.

A continuación se muestra el código ExtJS.

Ext.onReady(function(){ 
var store = Ext.create('Ext.data.JsonStore', { 
    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], 
    data: [{ 
     'name': 'January', 
     'data1': 10 
    }, { 
     'name': 'February', 
     'data1': 7 
    }, { 
     'name': 'March', 
     'data1': 5 
    }, { 
     'name': 'April', 
     'data1': 2 
    }, { 
     'name': 'May', 
     'data1': 27 
    }] 
}); 

Ext.create('Ext.chart.Chart', { 
    renderTo: Ext.getBody(), 
    width: 800, 
    height: 600, 
    animate: true, 
    store: store, 
    theme: 'Base:gradients', 
    legend: { // Pie Chart Legend Position 
     position: 'right' 
    }, 
    series: [{ 
     type: 'pie', 
     field: 'data1', 
     showInLegend: true, 
     tips: { 
      trackMouse: true, 
      width: 140, 
      height: 28, 
      renderer: function(storeItem, item){ 
       //calculate and display percentage on hover 
       var total = 0; 
       store.each(function(rec){ 
        total += rec.get('data1'); 
       }); 
       this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1')/total * 100) + '%'); 
      } 
     }, 
     highlight: { 
      segment: { 
       margin: 5 
      } 
     }, 
     label: { 
      field: 'name', 
      display: 'rotate', 
      contrast: true, 
      font: '18px Arial' 
     }, 
     listeners: {//This Doesnt Work :(
      itemclick: function(o){ 
       alert('clicked at : ' + o); 
      } 
     } 

    }], 
    listeners: { //This Event handler works but I am not sure how to figure how which slice i have clicked .................................. 
     click: { 

      element: store, //bind to the underlying el property on the panel 
      fn: function(o, a){ 

       alert('clicked' + o + a + this); 
      } 
     } 

    } 

}); 

}); 

Amablemente ayuda.

Saludos, Lalit

Answer 1

Aquí es cómo obtener los datos de la rebanada se hace clic. La clase serie apoya oyentes a través de la sintaxis observable y que son:

1. itemmouseup Cuando el usuario interactúa con un marcador.
2. itemmousedown Cuando el usuario interactúa con un marcador.
3. itemmousemove Cuando el usuario itera con un marcador.
4. afterrender Se activará cuando finalice la animación o cuando la serie se haya procesado por completo.

Haré uso del evento itemmousedown para capturar la porción cliqueada. Aquí está mi método detector:

series: [{ 
     . 
    . 
    . 
    listeners:{ 
     itemmousedown : function(obj) { 
     alert(obj.storeItem.data['name'] + ' &' + obj.storeItem.data['data1']); 
    } 
    } 
    . 
}] 

Tenga en cuenta que he puesto mi oyente dentro de la serie y no a la carta! Ahora, la variable obj contiene mucha información. Para cada serie, la propiedad para obtener datos será diferente. Por lo tanto, tendrá que inspeccionar cuidadosamente el objeto utilizando Firebug o alguna otra herramienta de desarrollador.

Ahora, en caso de PieCharts, se puede obtener la información mediante el uso de la rebanada obj:

obj.storeItem.data['your-series-variable-name'] 

Aquí es el obj de Firebug ..

Answer 2

estoy usando un más selectivo enfoque, porque necesitaba agregar un poco de lógica personalizada para implementar arrastrar y soltar para nuestros gráficos. Así que después de la definición gráfica Acabo de añadir lo siguiente:

// Add drag-and-drop listeners to the sprites 
var surface = chart.surface; 
var items = surface.items.items; 
for (var i = 0, ln = items.length; i < ln; i++) { 
    var sprite = items[i]; 
    if (sprite.type != "circle") { continue; } // only add listeners to circles 
    // Additional funky checks for the draggable sprites 
    sprite.on("mousedown", onSpriteMouseDown, sprite); // mouse down ONLY for sprites 
} 
surface.on("mousemove", onSurfaceMouseMove, surface); // mouse move for the entire surface 
surface.on("mouseup", onSurfaceMouseUp, surface); 

Salud! Frank