2013-03-04 15 views
5

Desidero nascondere selettivamente alcune legende di alcune serie in un grafico. E questo http://www.jqplot.com/docs/files/jqplot-core-js.html#Series.showLabel sembra essere l'opzione corretta per questo.controllo della legenda jqplot per serie. Serie showLabel non funziona con EnhancedLegendRenderer

Ma usare series:{showLabel:false} con sembra non funzionare.

An (vecchio) biglietto aperto a questo proposito: https://bitbucket.org/cleonello/jqplot/issue/100/feature-request-individual-legend-control

sto utilizzando nel modo giusto? È anche gradita qualsiasi altra soluzione alternativa per ottenere ciò.

Aggiornamento:

showLabel funziona bene con legendRenderer normale.

risposta

1

Nella funzione draw nel file jqplot.enhancedLegendRenderer.js vediamo questo intorno alla riga 132:

if (idx < series.length && (series[idx].show || series[idx].showLabel)){ 

per il contesto, questo pezzo di codice fa parte delle funzionalità che crea la tabella leggenda. Una riga viene creata se la serie è impostata per essere visualizzata (l'impostazione predefinita è true) o l'etichetta della serie deve essere mostrata. Ciò significa che per evitare la creazione di una legenda per una serie, è necessario nascondere l'intera serie stessa e impostare showLabel su false, che non è l'ideale.

Invece, provare a impostare il || su && - questo ha funzionato nel mio caso. Prova a modificare prima la versione non ancora terminata.

Edit:

La prima cosa da fare è quello di fare il cambiamento ho suggerito nella mia risposta originale.

Successivamente, è necessario impedire la creazione degli elementi tr nella legenda se showLabel è false. Appena prima del se-dichiarazione di cui sopra, si vedrà questo codice:

tr = $(document.createElement('tr')); 
tr.addClass('jqplot-table-legend'); 
if (reverse){ 
    tr.prependTo(this._elem); 
} 
else{ 
    tr.appendTo(this._elem); 
} 

Change a questo (tutto quello che stiamo facendo qui è avvolgendolo nello stesso se-dichiarazione che abbiamo usato in precedenza):

if (idx < series.length && (series[idx].show && series[idx].showLabel)){ 
    tr = $(document.createElement('tr')); 
    tr.addClass('jqplot-table-legend'); 
    if (reverse){ 
     tr.prependTo(this._elem); 
    } 
    else{ 
     tr.appendTo(this._elem); 
    } 
} 

Scorrere verso il basso un po 'di più (circa la linea 212) e vedrete il seguente codice:

if (this.showLabels) { 
    console.log(this._elem.find('tr').length - 1); 
    td2.bind('click', {series:s, speed:speed, plot: plot, replot:this.seriesToggleReplot }, handleToggle); 
    td2.addClass('jqplot-seriesToggle'); 
} 

Questa è vincolante il gestore di eventi per quando una delle serie si fa clic nella legenda. Quello che dobbiamo fare è aggiungere una proprietà aggiuntiva al letterale oggetto che incapsula i dati che viene passato al metodo click:

td2.bind('click', {series:s, speed:speed, plot: plot, 
    replot:this.seriesToggleReplot, 
    trIndex: this._elem.find('tr').length - 1 }, handleToggle); 

trIndex rappresenta l'indice effettivo della riga nella tabella HTML. È questo che garantisce che la legenda eliminerà l'elemento corretto.

all'interno della dichiarazione doLegendToggle, vedrete codice come questo:

if (s.canvas._elem.is(':hidden') || !s.show) { 
    // Not sure if there is a better way to check for showSwatches and showLabels === true. 
    // Test for "undefined" since default values for both showSwatches and showLables is true. 
    if (typeof plot.options.legend.showSwatches === 'undefined' || plot.options.legend.showSwatches === true) { 
     plot.legend._elem.find('td').eq(sidx * 2).addClass('jqplot-series-hidden'); 
    } 
    if (typeof plot.options.legend.showLabels === 'undefined' || plot.options.legend.showLabels === true) { 
     plot.legend._elem.find('td').eq((sidx * 2) + 1).addClass('jqplot-series-hidden'); 
    } 
} 
else { 
    if (typeof plot.options.legend.showSwatches === 'undefined' || plot.options.legend.showSwatches === true) { 
     plot.legend._elem.find('td').eq(sidx * 2).removeClass('jqplot-series-hidden'); 
    } 
    if (typeof plot.options.legend.showLabels === 'undefined' || plot.options.legend.showLabels === true) { 
     plot.legend._elem.find('td').eq((sidx * 2) + 1).removeClass('jqplot-series-hidden'); 
    } 
} 

vedere quei quattro riferimenti alla variabile sidx, cambia in modo che il codice sta invece usando la variabile trIndex. Per fare ciò, sostituire i quattro riferimenti sidx con d.trIndex.

+0

Avevo provato esattamente la stessa cosa subito dopo aver postato la domanda. Ma il problema è che questo non è di buon auspicio con l'opzione SeriesToggle, ad esempio., Facendo clic su una delle etichette di una legenda visibile colpisce gli altri o così. Quindi immagino che anche questa parte del codice debba essere modificata per adattarsi a questo. – Siva

+0

@Siva Buon punto. Vedi la mia modifica. È abbastanza complicato, ma ha funzionato per me. –

+0

Mi sembra buono! Forse potresti inviare una richiesta di pull a [jqplot repo] (https://bitbucket.org/cleonello/jqplot) in modo che altri possano dare un'occhiata. – Siva

2

Aggiungi questa riga sotto il jqplot:

$($("#chartXXX .jqplot-table-legend").get(0)).hide(); 

Giocare con il numero interno get(), come io non sono esattamente sicuro di come il numero è mappato agli elementi leggenda. Questa soluzione è molto più elegante di quella del codice EnhancedLegendRenderer.

+0

Grazie! L'ho modificato per il mio codice in: $ ("# chartXXX tr.jqplot-table-legend"). First(). Hide(); Per nascondere la prima riga della tabella (prima voce della legenda). – DaFrenk

0

pozzo I combinati risposta da jbass e dalla DaFrenk e il risultato è:

$($("#chartXXX tr.jqplot-table-legend").get(0)).hide(); 

Il numero in get è zero indice basato definente riga della tabella legenda. Questo fa esattamente quello che voglio.

Problemi correlati