Xử lí và xếp chồng lên nhau multiBarChart với NVD3

Question

Có thể câu hỏi trùng lặp để Bar chart in Javascript: stacked bars + grouped bars

Tôi đang cố gắng để tạo ra một biểu đồ thanh xếp chồng lên nhau cho phép bạn so sánh 2 giá trị (tối và giữa màu xanh) để dữ liệu tuần trước điểm (blues ánh sáng thứ cấp 'phía sau').

1. Bắt đầu với multiBarChart() với .stacked(true) đầu tiên tôi đã cố gắng kết hợp cả hai tuần vào một mảng duy nhất của 14 quán bar, nơi vị trí x có thể giúp nhóm các thanh. Tôi cố gắng để tạo thành mảng kết hợp của tôi về đối tượng mà các giá trị .x tính là 0, 0.3, 1, 1.3, 2, 2.3 vv Đáng tiếc là không giống như lineChart() nó không sử dụng giá trị x cho việc định vị.

2. Một ý tưởng khác là khai thác nhóm .stacked(false), cung cấp 4 mục (thay vì 2) với cùng giá trị x. Sau đó chúng xuất hiện chồng lên nhau thay vì xếp chồng lên nhau. Ở đây khoảng cách có vẻ tốt, nhưng làm cách nào để ngăn xếp 2 khoảng 2 này?

Answer 1

Hãy để tôi nói lên rằng tôi không phải là chuyên gia về nvd3. Tôi gần như không thể vượt qua giai đoạn bắt đầu.

Điều đó nói rằng, có vẻ như bạn đang làm việc này quá khó với bản thân.

Tôi nghĩ bạn thực sự muốn gửi nvd3 hai bộ dữ liệu, với kết hợp của x giữa hai. (Ví dụ, (1, y1a) tương ứng với (1, y2a), sau đó (2, y2a) với (2, y2b), vv)

Bạn có thể thấy điều này rõ ràng hơn bằng cách sau:

1. Đi tới số Live Code page
2. Chọn Biểu đồ thanh nhóm/xếp chồng.
3. Chọn tab Dữ liệu (JSON).
4. Thay thế chức năng đầu tiên với những điều sau đây, và quan sát các giá trị x kết quả .:

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

tốt nhất như tôi hiểu nó, đó là mô hình mà bạn đang tìm kiếm.

Answer 2

Hey Tôi vừa phát triển biểu đồ nhóm được xếp chồng lên nhau + nhóm trên d3.js. Nó không phải là NVD3 nhưng nó có thể giúp bạn.

• Source

• Demo