Biểu đồ hình tròn lồng nhau/đa cấp/khoan xuống trong Javascript?

Question

Tôi đang cố gắng tạo biểu đồ hình tròn bằng javascript cho phép người dùng nhấp vào một lát và "xem những gì tạo nên lát đó". Nếu bạn đã từng sử dụng mint.com, bạn sẽ biết ý tôi là gì - giả sử bạn đang xem biểu đồ tròn chi phí và bạn nhấp vào ô "Ô tô", sau đó bạn thấy lát mở rộng thành biểu đồ mới về Gas, Bảo trì, Để thực hiện điều này thêm một bước nữa, tôi đang xử lý một lượng lớn dữ liệu, do đó, có thể tìm nạp (ajax) dữ liệu mới khi slice được nhấp vào cũng sẽ là một tùy chọn hữu ích (mặc dù tôi có lẽ có thể lấy đi mà không có nó).

Có lẽ "lồng nhau", "đa cấp" và "khoan xuống" không phải là điều khoản phù hợp vì tôi đã tìm kiếm cả ngày và dường như không thể tìm ra giải pháp.

Có ai biết thư viện về điều này không? Cảm ơn trước!

Answer 1

Tôi đã triển khai các hệ thống phân tích tương tự bằng cách sử dụng sự kiện nhấp chuột điểm HighCharts. Đây là cú pháp thô:

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

Trong ví dụ này, bạn xác định sự kiện nhấp chuột sử dụng giá trị id của điểm (this.id) để thực hiện bài đăng Ajax cho URL. Sau đó, bạn sử dụng dữ liệu từ bài đăng của mình để liên kết lại chuỗi biểu đồ.

Xin lưu ý rằng mỗi lần bạn sử dụng hàm setData để cập nhật biểu đồ, mỗi điểm dữ liệu cần phải có giá trị id để tiếp tục khai thác.

Hy vọng điều này sẽ hữu ích!

Answer 2

Cố gắng thư viện biểu đồ pie psd3
Demo - https://pshivale.github.io/psd3
Nguồn - https://github.com/pshivale/psd3
Nó hỗ trợ các biểu đồ pie đa cấp, biểu đồ và biểu đồ bánh rán sunburst. Nó cũng hỗ trợ khoan xuống một miếng bánh bằng cách nhấp đúp vào nó.