ExtJS如何将点击事件添加到饼图片

我已经使用sencha ExtJS网站中的饼图示例创建了饼图，我想为每个饼图片添加一个点击事件，以便处理上下文该片上的数据。我能够向馅饼添加点击侦听器，但不知道如何获取切片上的数据。ExtJS如何将点击事件添加到饼图片

以下是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); 
      } 
     } 

    } 

}); 

});

请帮忙。

问候，拉利特

来源

2011-05-11 Lalit

这里是你如何获得点击切片的数据。该系列类支持通过可观测的语法的听众和它们是：

itemmouseup当用户与标记相互作用。
itemmousedown当用户与标记进行交互时。
itemmousemove当用户使用标记迭代时。
afterrender动画结束时或系列完全呈现时触发。

我会利用itemmousedown事件的捕捉点击切片。这里是我的监听方法：

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

请注意，我已经放在系列并没有在图表内我的听众！现在，obj变量拥有大量信息。对于每个系列，获取数据的属性将有所不同。所以，你将不得不使用萤火虫或其他开发工具仔细检查对象。现在

，在扇形图的情况下，可以通过使用obj获取切片信息：

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

这里是萤火虫的obj .. enter image description here

来源

2011-05-11 19:52:42

你是绝对正确的！我误解了这个问题。 – sra

非常感谢Abdel，它的工作，但我不明白为什么itemclick没有工作和itemmousedown事件的作品。你有关于这个文档的任何链接。 – Lalit

即使图表有itemclick事件。我没有在Series源代码中看到它。必须阅读更多的代码来回答你的问题。你可以从http：//dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.chart.series.Series.html –

我使用的是更具选择性的方法，因为我需要添加一些自定义逻辑来实现拖放我们的图表。所以，图表定义后，我只需添加如下：

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

干杯！弗兰克

来源

2014-09-15 18:52:19 fraber

ExtJS如何将点击事件添加到饼图片

回答

相关问题