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如何將點擊事件添加到餅圖片

回答

相關問題