2013-06-06 9 views
16

Mam kilka wierszy i wiem, że kliknięcie "kropki" w legendzie spowoduje ukrycie/pokazanie.Jak domyślnie wyłączyć niektóre strumienie na wykresie prostym nvd3?

Muszę jednak zacząć od wyłączenia niektórych linii i nie być wyświetlanymi, a użytkownik będzie musiał kliknąć kropkę w legendzie, aby wyświetlić ją na wykresie.

(np. I wykres liczbę pytań na stackoverflow na język, ale z C, PHP i javascript wyłączone domyślnie). wykres pokazuje tylko pythona, ruby ​​... ale na legendzie masz wszystkie języki, w tym C, PHP i js, przy czym te 3 są wyłączone.

Nie znalazłem metody/atrybutu dla każdej serii danych, aby ustawić domyślny status pokaz/ukryj. Czy czegoś brakuje?

Odpowiedz

7

dla każdego z serii danych, które chcesz wyłączona, po prostu zrobić:

series.disabled=true 

nvd3 nie robi wszystkiego, ale jeśli jesteś w stanie czytać kod jest całkiem elastyczny. Odkryłem to poprzez znalezienie tej linii w źródle kilka modeli wykresu:

state.disabled = data.map(function(d) { return !!d.disabled }); 
0

NVD3 nie jest wystarczająco elastyczny - niczego nie brakuje, nie można tego zrobić (przynajmniej nie po wyjęciu z pudełka). Trzeba samemu zaimplementować tę funkcję lub użyć zwykłego starego D3.

+0

zgadzam się z @Lars Kothoff – shabeer90

1

Można zacząć się z ukrytą wykresie i spróbować czegoś takiego:

// Array of series you want to hide 
var hidden = [0, 2]; 

// Dispatch click event to each element 
var e = document.createEvent('UIEvents'); 
e.initUIEvent('click', true, true); 
d3.select('.nv-legend') 
    .selectAll('.nv-series') 
    .filter(function(d, i){return hidden.indexOf(i) !== -1;}) 
    .node() 
    .dispatchEvent(e); 

Po zakończeniu tego odkryć wykresu i seria zostanie wyłączony.

14

można zmienić których strumienie są włączone/wyłączone przy użyciu obiektu chart.state(). Na przykład:

// Assuming your chart is called 'chart' 
var state = chart.state(); 

for(var i=0; i < state.disabled.length; i++) { 
    state.disabled[i] = ...LOGIC RETURNING TRUE OR FALSE...; 
} 

chart.dispatch.changeState(state); 
chart.update(); 
+0

to działa świetnie. Jedno pytanie jednak - jak nazwać "chart.update()"? Dla mojego wykresu z kilkoma tysiącami punktów danych, jest wymiernie szybsze, niż nie wywoływać aktualizacji, i nadal wydaje się działać dobrze. –

+0

@ EugeneBeresovsky Tak, masz rację. w lineChart.js szukałem 'dispatch.on ('changeState'' i stwierdziłem, że' chart.update(); 'jest już wywoływane, nie ma potrzeby wywoływania go ponownie. – Felix

20

Po przeczytaniu tej odpowiedzi miałem jeszcze zrobić trochę więcej czytania w porządku dla mnie, aby zrozumieć, w jaki sposób ustawić strumień wyłączone z mojego JSON strumienia danych na wykresach.

Poniższy przykład jest rozwiązany, co to dla mnie niepełnosprawnych: true

{ 
    key: "something", 
    disabled: true, 
    values: [...] 
    } 
Powiązane problemy