Extjs 5-Diagrammlegendenproblem
-
21-12-2019 - |
Frage
Ich versuche, eine hinzuzufügen legend
zu meinen extjs 5-Charts und es scheint nicht zu funktionieren.Ist das ein Fehler oder mache ich etwas falsch?
legend: {
docked: 'top',
style: {
borderColor: 'red',
borderStyle: 'solid'
}
}
Lösung
Ich habe eine Weile an demselben Problem gearbeitet – und schließlich einen Sencha-Fehlerbericht eingereicht:
http://www.sencha.com/forum/showthread.php?289279-Sencha-5-Charts-Broken-Legend
Um es kurz zu machen: Beim nächsten EXTjs-Rollout soll es „angeblich“ einen Fix geben.Leider hilft uns das jetzt nicht weiter...
Sie können jedoch ein TPL für die Legende erstellen – mein TPL ist jedoch nicht ganz so robust wie die native ExtJS-Legende.Die Serie wird weiterhin angezeigt/ausgeblendet, die Serie wird jedoch nicht in der Legende maskiert.Ich verfeinere die TPL immer noch und werde ein Update veröffentlichen, sobald ich eine zum Laufen gebracht habe.
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'
},
Andere Tipps
Um inaktive Reihen in der Legende zu maskieren, verwenden Sie einen ternären Operator, um nach „values.disabled“ zu suchen
<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>
Fügen Sie bei Bedarf auch eine CSS-Klasse hinzu
x-legend-inactive{
opacity: 0.5;
}