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

Question

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

Answer 1

我没有必要这样做，但我不得不做类似的事情。

您无法在图表画布上添加ExtJS按钮，因为画布上的任何内容都必须是绘制的组件。我想你可以画出自己的按钮......

但是添加一个文本精灵“Show Legend”更容易（也更均匀），并给它一些听众，让它表现得像纽扣（就像内置图例处理点击的方式一样）。即当你将鼠标悬停在它上面时，它会变为粗体，当你点击它时，你可以显示/隐藏图例。

我没有其他代码，但这应该给你一个粗略的想法：

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