Problema con la leyenda del gráfico Extjs 5

Question

Estoy intentando agregar un legend a mis gráficos extjs 5 y no parece funcionar.¿Es esto un error o estoy haciendo algo mal?

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

Answer 1

Había estado trabajando en este mismo problema por un tiempo, y finalmente envié un informe de errores de Sencha:

http://www.sencha.com / foro / showthread.php? 289279-Sencha-5-gráficos-roto-leyenda

Long Story Short, hay "supuestamente" una solución en la siguiente marcha extugs.Desafortunadamente, eso no nos ayuda ahora ...

Puede que cree un TPL para la leyenda, pero mi TPL no es tan sólido como la leyenda de los EXTJS nativos.Todavía mostrará / ocultará la serie, pero no enmascara la serie en la leyenda.Todavía estoy refinando el TPL y publicaré una actualización, ya que obtengo un trabajo.

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

Para enmascarar las series inactivas en la leyenda, use un operador de ternario para verificar los valores.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>

también si es necesario, agregue una clase CSS para

x-legend-inactive{
   opacity: 0.5;
}