将自定义组件添加到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(); 
      } 
     } 
    }] 
});