Zagnieżdżony/wielopoziomowy/drążenie wykresu kołowego w JavaScript?

Question

Próbuję utworzyć wykres kołowy z javascript, który pozwoli użytkownikom kliknąć plasterek i "zobacz, co tworzy ten kawałek". Jeśli kiedykolwiek korzystałeś z serwisu men.com, będziesz wiedział, o co mi chodzi - mówisz, że oglądasz wykres kołowy z wydatkami i klikniesz plastelinę "Automobile", a zobaczysz, że plasterek rozwija się do nowego wykresu gazu, konserwacji, itd.

Aby zrobić krok dalej, mam do czynienia z dużą ilością danych, więc możliwość pobrania (ajax) nowych danych po kliknięciu plasterka również byłaby przydatna (chociaż ja prawdopodobnie bez tego może uciec).

Być może „zagnieżdżone”, „multi-level” oraz „drążenia” nie są odpowiednie warunki, ponieważ Szukałam cały dzień i nie wydaje się znaleźć rozwiązanie.

Czy ktoś wie biblioteki dla tego? Z góry dziękuję!

Answer 1

I zostały wdrożone podobne systemy drążenia za pomocą zdarzenia HighCharts punkt kliknięcia. Tutaj jest szorstka składnia:

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     type: 'pie' 
    }, 
    series: [{ 
     data: myInitialDataArray, // make sure each data point has an id 
     point: { 
      events: { 
       click: function() { 
        $.post('/get/data/by/id/' + this.id, function(data) { 
         // you may need to format your data here 
         chart.series[0].setData(data); 
        }); 
       } 
      } 
     } 
    }] 
}); 

W tym przykładzie można zdefiniować zdarzenia click, który używa wartości id Punktu (this.id), aby wykonać słupek Ajax do adresu URL. Następnie wykorzystasz dane ze swojego posta do ponownego związania serii wykresów.

Należy pamiętać, że za każdym razem użyć funkcji setData zaktualizować schemat, każdy punkt pomiarowy musi mieć wartość id celem dla drążenia, aby kontynuować.

Mam nadzieję, że to pomoże!

Answer 2

Spróbuj biblioteki wykres psd3 pie
Demo - https://pshivale.github.io/psd3
Source - https://github.com/pshivale/psd3
Obsługuje wykresy kołowe wielopoziomowych, wykresy pączka i Sunburst wykresów. Obsługuje również odwiercanie wycinka koła poprzez podwójne kliknięcie.