2013-03-04 8 views
5

Chcę selektywnie ukrywać legendy niektórych serii w wątku. I ta http://www.jqplot.com/docs/files/jqplot-core-js.html#Series.showLabel wygląda na odpowiednią opcję.Sterowanie legalizacją jqplot na serię. Series showLabel nie działa z EnhancedLegendRenderer

Ale używanie series:{showLabel:false} z wydaje się nie działać.

Otwarta (stary) bilet w tym względzie: https://bitbucket.org/cleonello/jqplot/issue/100/feature-request-individual-legend-control

używam go w prawo? Dozwolone są również inne sposoby obejścia tego problemu.

Aktualizacja:

showLabel działa dobrze z normalnego legendRenderer.

Odpowiedz

1

W funkcji w pliku jqplot.enhancedLegendRenderer.js Widzimy to draw na temat linii 132:

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

W kontekście tego bitu kodu jest częścią funkcji, która tworzy tabelę legendy. Wiersz zostanie utworzony, jeśli wyświetlana jest seria (widok domyślny to true) lub etykieta serii ma być wyświetlana. Oznacza to, że aby zapobiec tworzeniu pozycji legendy dla serii, musisz ukryć całą serię, a także ustawić showLabel na false, co nie jest idealne.

Zamiast tego spróbuj ustawić || na && - działało to w moim przypadku. Spróbuj najpierw wprowadzić zmiany w niezainfikowanej wersji.

Edit:

Pierwszą rzeczą do zrobienia jest, aby dokonać zmiany zasugerowałem w moim pierwotnym odpowiedź.

Następnie musimy zapobiec tr elementy w legendzie z tworzone jeśli showLabel jest false. Tuż przed IF-oświadczenie, o którym mowa powyżej, widać ten kod:

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

zmienić go na to (wszystko robimy tutaj jest owijanie go w tym samym IF-oświadczenie użyliśmy wcześniej):

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); 
    } 
} 

Przewiń trochę więcej (około 212 linii) i pojawi się następujący kod:

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'); 
} 

ta jest wiążąca dla obsługi zdarzeń, gdy jeden z serii kliknięciu w legendzie. Co musimy zrobić, to dodać dodatkową właściwość do dosłownego obiektu, który kapsułkuje dane, które są przekazywane do metody click:

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

trIndex reprezentuje rzeczywistą indeks wiersz w tabeli HTML. To zapewnia, że ​​legenda usunie właściwy element.

Wewnątrz deklaracji doLegendToggle, widać kod tak:

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'); 
    } 
} 

Widzisz te cztery odwołania do zmiennej sidx zmienić je tak, że kod jest zamiast użyciu zmiennej trIndex. Aby to zrobić, zamień cztery odniesienia sidx na d.trIndex.

+0

Próbowałem dokładnie to samo wkrótce po zaksięgowaniu pytania. Problem polega jednak na tym, że nie jest to dobre wróżenie z opcją seriesToggle, tzn. Kliknięcie jednej z widocznych etykiet legendy powoduje odrzucenie innych. Sądzę więc, że część kodu musi również zostać zmieniona, aby to pasować. – Siva

+0

@Siva Dobra uwaga. Zobacz moją edycję. To dość skomplikowane, ale dla mnie zadziałało. –

+0

Wygląda dobrze dla mnie! Być może mógłbyś wysłać prośbę o pociągnięcie do [repozytorium jqplot] (https://bitbucket.org/cleonello/jqplot), aby inni mogli również rzucić okiem. – Siva

2

Dodaj tę linię poniżej jqplot:

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

Pobaw się z numerem wewnątrz get(), ponieważ nie jestem do końca pewien, jak numer jest mapowany do elementów legendy. To rozwiązanie jest o wiele bardziej eleganckie niż zmiana kodu enhancedLegendRenderer.

+0

Dzięki! Zmieniono go dla mojego kodu na: $ ("# chartXXX tr.jqplot-table-legend"). First(). Hide(); Aby ukryć pierwszy wiersz tabeli (wpis pierwszej legendy). – DaFrenk

0

Dobrze połączone odpowiedź od jbass oraz DaFrenk i wynik:

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

Numer w get jest zerowy wskaźnik podstawie których określa wiersza w tabeli legenda. Robi dokładnie to, co chcę.