Problème de légende de graphique Extjs 5
-
21-12-2019 - |
Question
J'essaie d'ajouter un legend
à mes graphiques extjs 5 et cela ne semble pas fonctionner.Est-ce un bug ou est-ce que je fais quelque chose de mal ?
legend: {
docked: 'top',
style: {
borderColor: 'red',
borderStyle: 'solid'
}
}
La solution
Je travaillais sur ce même problème depuis un certain temps - et j'ai finalement soumis un rapport de bug Sencha :
http://www.sencha.com/forum/showthread.php?289279-Sencha-5-Charts-Broken-Legend
Pour faire court, il y a "soi-disant" un correctif dans le prochain déploiement d'EXTjs.Malheureusement, cela ne nous aide pas maintenant...
Vous pouvez cependant créer un tpl pour la légende - mais mon tpl n'est pas aussi robuste que la légende extjs native.Il affichera/masquera toujours la série, mais ne masquera pas la série dans la légende.Je suis encore en train d'affiner le TPL et je publierai une mise à jour au fur et à mesure que j'en aurai une.
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'
},
Autres conseils
Pour masquer les séries inactives dans la légende, utilisez un opérateur ternaire pour vérifier les valeurs.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>
Aussi, si nécessaire, ajoutez une classe CSS pour
x-legend-inactive{
opacity: 0.5;
}