EXTJS 5チャートの凡例

Question

extjs 5チャートにlegendを追加しようとしています。これはバグですか、それとも間違っていることをしていますか？

legend: {  
    docked: 'top',
    style: {
         borderColor: 'red',
         borderStyle: 'solid'
    }
}

.

Answer 1

私はしばらくの間この同じ問題に取り組んでいました - そしてついにSenchaバグレポートを提出しました：

http：//www.sencha。COM / FORUM / SHOWTHREAD.PHP？289279 - Sencha-5チャート壊れた凡例

ロングストーリーの短い、次のEXTJSロールアウトに「おそらく」修正があります。残念ながら、それは今私たちを助けません...

凡例のためのTPLを作成することができます - しかし、私のTPLはネイティブのextjsの伝説としては堅牢ではありません。それはまだシリーズを表示/非表示にしますが、凡例のシリーズをマスクしません。私はまだTPLを洗練していて、1つの作業を受けるように更新を投稿します。

legend: {
        docked: 'top',
        border: 0,
        style: { borderColor: 'red' },
        tpl: [            
            '<tpl for=".">',                
                '<div class="myLegendItem" style="float:left;margin:5px;padding:0px;cursor:pointer;">',
                      '<div class="" style="float:left;margin:2px;width:10px;height: 10px; background:{mark};opacity:.6"></div><div style="float:left;">{name}</div>',                                      
                '</div>',                    
            '</tpl>'                
        ],
        itemSelector: '.myLegendItem'
},

.

Answer 2

凡例の非アクティブなシリーズをマスクするには、3ounary演算子を使用して値を確認します.disabled

<div class="x-legend-container">
    <tpl for=".">
        <div class="x-legend-item {[ values.disabled ? Ext.baseCSSPrefix + 'legend-inactive' : '' ]}">
            <span class="x-legend-item-marker" style="background:{mark};float:left;width:10px;height:10px;"></span>
            <span style="float:left;margin-left:4px;">{name}</span>
        </div>
    </tpl>
</div>

.

必要に応じて

にCSSクラスを追加する場合

x-legend-inactive{
   opacity: 0.5;
}

.