extjs4.1 - 将自定义组件添加到 EXTJS 图表

Question

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

Answer 1

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

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

但是只添加一个文本 Sprite “显示图例”并给它一些听众使其表现得像按钮一样更容易(也更统一)(就像内置图例处理点击的方式一样)。 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();
            }
        }
    }]
});