将自定义组件添加到 EXTJS 图表

Posted 2023-02-26

【中文标题】将自定义组件添加到 EXTJS 图表

【英文标题】：Adding custom component to EXTJS chart

【发布时间】：2012-08-16 15:20:23

【问题描述】：

我需要在 ExtJS 4 图表区域添加一个小按钮来显示/隐藏图例。它应该直接在图表画布上，而不是在画布之外的额外面板上。

【参考方案1】：

我不必专门这样做，但我必须做类似的事情。

您不能真正将 ExtJS 按钮添加到图表画布，因为画布本身的任何内容都必须是绘制的组件。我想你可以画自己的按钮......

但是添加一个文本精灵“显示图例”并给它一些侦听器使其表现得像按钮更容易（也更统一）（就像内置图例处理点击的方式一样）。 IE。当您将鼠标悬停在它上面时，它会变粗，当您单击它时，您可以显示/隐藏图例。

我没有其他代码，但这应该可以让您大致了解一下：

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();
            
        
    ]
);