Extjs图5图集

Question

我试图将一个legend添加到我的extjs 5图表中，但它似乎不起作用。这是个窃听器还是我做错什么了？

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

Answer 1

我在这个问题上做了一段时间--最后提交了一份关于Sencha Bug的报告：

http://www.sencha.com/forum/showthread.php?289279-Sencha-5-Charts-Broken-Legend

长话短说，下一次EXTjs的推出“应该”有一个修复方案。不幸的是，这对我们现在没有帮助..。

但是，您可以为图例创建一个tpl --但我的tpl并不像本地extjs传奇那样健壮。它仍然会显示/隐藏该系列，但不会在传说中掩盖该系列。我仍然在完善的第三方物流，并将发布一个更新，因为我得到一个工作。

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

若要掩盖图例中不活动的系列，请使用三元运算符检查values.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;
}