3

凡例を表示/非表示にするには、ExtJS 4 チャート領域に小さなボタンを追加する必要があります。キャンバス外の余分なパネルではなく、グラフ キャンバス上に直接配置する必要があります。

4

1 に答える 1

2

特にそうする必要はありませんでしたが、似たようなことをしなければなりませんでした。

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();
            }
        }
    }]
});
于 2012-08-17T01:37:48.333 に答える