Pogrupowane i ułożone multiBarChart z NVD3

Question

Możliwy duplikat pytanie Bar chart in Javascript: stacked bars + grouped bars

Próbuję utworzyć skumulowany wykres słupkowy, który pozwala porównać 2 wartości (ciemny i średni niebieski) do zeszłotygodniowych punktów danych (wtórne bluesowych świetlnych 'za').

1. Począwszy multiBarChart() z .stacked(true) pierwszy próbowałem łączących oba tygodnie w jednej tablicy 14 barów, gdzie pozycja x mogłyby pomóc grupie pasków. Próbowałem tworzyć moje połączoną tablicę obiektów, w których wartości .x właściwości są to 0, 0.3, 1, 1.3, 2, 2.3 itp Niestety w przeciwieństwie lineChart() go nie używa wartości x do pozycjonowania.

2. Innym pomysłem jest wykorzystanie grupy .stacked(false), dostarczając 4 przedmioty (zamiast 2) o tej samej wartości x. Są one następnie nakładane jedna na drugą zamiast na stos. Tutaj odstępy wyglądają dobrze, ale w jaki sposób ułożyć te 2 na 2?

Answer 1

Pozwolę sobie powiedzieć z góry, że nie jestem ekspertem nvd3. Ledwie jestem już na etapie startu.

To powiedziawszy, wygląda na to, że robisz to zbyt mocno na sobie.

Myślę, że naprawdę chcesz wysłać nvd3 dwa zestawy danych, z dopasowaniem x pomiędzy tymi dwoma. (Np, (1, Y1A) odpowiadający (1, Y2A), wówczas (2 Y2A) z (2, y2b), itd.)

Widać to wyraźniej brzmienie:

1. Przejdź do ich Live Code page
2. Wybierz wykres słupkowy grupy/skumulowany.
3. Wybierz kartę Dane (JSON).
4. Wymień pierwszej funkcji z następujących czynności i przestrzegać wynikających wartości x .:

    function() { 
     return stream_layers(2,10,.1).map(function(data, i) { 
     alert('Stream '+i+': '+JSON.stringify(data)); 
     return { 
      key: 'Stream' + i, 
      values: data 
     }; 
     }); 
    } 

Najlepszy jak rozumiem, to model szukasz.

Answer 2

Hej Właśnie opracowałem zgrupowany + ułożony wykres słupkowy na stronie d3.js. To nie jest NVD3, ale może ci pomóc.

• Source

• Demo