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

Question

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

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