將自定義組件添加到EXTJS圖表

Question

我需要在ExtJS 4圖表區域添加一個小按鈕以顯示/隱藏圖例。它應該直接在圖表畫布上，而不是在畫布外部的額外面板上。

Answer 1

我不必這樣做，但我不得不做類似的事情。

您無法真正將ExtJS按鈕添加到圖表畫布，因爲畫布上的任何內容都必須是繪製的組件。我想你可以畫出自己的按鈕...

但是，更簡單（更統一），只需添加一個文本 - 精靈「顯示圖例」，並給它一些聽衆，使其表現出扣人心絃內置圖例處理點擊）。即當你將鼠標懸停在上面時，它會變得粗體，當你點擊它時，你可以顯示/隱藏圖例。

我沒有我的其他代碼，但是這應該給你一個粗略的想法：

var chart = Ext.create('Ext.chart.Chart', { 
    style: 'background:#fff', 
    theme: 'MyTheme', 
    // other configs like axes and series... 
    items: [{ 
     type: 'text', // i.e. a text sprite 
     text: 'Show Legend', 
     font: '14px Arial', 
     x: 300, // left location 
     y: 10, // top location 
     listeners: { 
      mouseover: function() { 
       // make "Show Legend" bold 
      }, 
      mousedown: function() { 
       chart.legend = true; 
       chart.redraw(); 
      } 
     } 
    }] 
});