중첩/다단계/드릴 다운 파이 차트 (Javascript)?

Question

저는 사용자가 슬라이스를 클릭하고 "해당 슬라이스를 구성하는 뷰를 볼 수있는"자바 스크립트가있는 파이 차트를 만들려고합니다. 만약 당신이 mint.com을 사용했다면, 당신이 비용 원형 차트를보고 "자동차"슬라이스를 클릭하고, 슬라이스가 가스, 유지 보수,

이 단계를 더 진행하려면 많은 양의 데이터를 다루므로 슬라이스를 클릭 할 때 새 데이터를 가져올 수 있기 때문에 (아약스) 아마 그것없이 도망 갈 수 있습니다.)

나는 하루 종일 검색했기 때문에 "중첩 된", "다중 레벨"및 "드릴 다운"이 올바른 용어가 아니며 솔루션을 찾지 못하는 것 같습니다.

누구든지이 라이브러리를 알고 있습니까? 미리 감사드립니다!

Answer 1

HighCharts 포인트 클릭 이벤트를 사용하여 유사한 드릴 다운 시스템을 구현했습니다. 여기에 거친 구문입니다 :이 예에서

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

, 당신은 URL에 아약스 게시물을 수행하는 지점의 id 값 (this.id)를 사용하는 클릭 이벤트를 정의합니다. 그런 다음 게시물의 데이터를 사용하여 차트 시리즈를 다시 바인딩합니다.

setData 함수를 사용하여 차트를 업데이트 할 때마다 드릴 다운을 계속 진행하려면 각 데이터 요소에 id 값이 있어야합니다.

희망이 도움이됩니다.

Answer 2

시도 psd3 원형 차트 라이브러리
데모 - https://pshivale.github.io/psd3
소스 - https://github.com/pshivale/psd3
그것은 멀티 레벨 파이 차트, 도넛 차트와 햇살 차트를 지원합니다. 또한 파이 슬라이스를 두 번 클릭하여 드릴 다운을 지원합니다.