nvd3 Biểu đồ thanh xếp chồng với giá trị rời rạc

Question

Tôi đang cố gắng sử dụng nvd3 để tạo biểu đồ thanh xếp chồng đứng. Tôi sẽ sử dụng các giá trị dữ liệu rời rạc, trái ngược với các giá trị được tạo ngẫu nhiên như ví dụ trên website của chúng.

Tôi đã cố gắng thử nghiệm với ví dụ mã trực tiếp của Biểu đồ thanh xếp chồng nhóm/xếp chồng và đặt vào dữ liệu JSON chứa các giá trị của riêng tôi. Những gì tôi đã cố gắng làm là lấy dữ liệu JSON từ biểu đồ thanh ngang và đặt nó vào làm dữ liệu cho biểu đồ thanh dọc.

Đây là dữ liệu tôi sử dụng trên các mã ví dụ sống ở vị trí của dữ liệu trong Chart Nhóm/Stacked Bar:

[ 
    { 
    "key": "Series1", 
    "color": "#d62728", 
    "values": [ 
     { 
     "label" : "Group A" , 
     "value" : -1.8746444827653 
     } , 
     { 
     "label" : "Group B" , 
     "value" : -8.0961543492239 
     } , 
     { 
     "label" : "Group C" , 
     "value" : -0.57072943117674 
     } , 
     { 
     "label" : "Group D" , 
     "value" : -2.4174010336624 
     } , 
     { 
     "label" : "Group E" , 
     "value" : -0.72009071426284 
     } , 
     { 
     "label" : "Group F" , 
     "value" : -0.77154485523777 
     } , 
     { 
     "label" : "Group G" , 
     "value" : -0.90152097798131 
     } , 
     { 
     "label" : "Group H" , 
     "value" : -0.91445417330854 
     } , 
     { 
     "label" : "Group I" , 
     "value" : -0.055746319141851 
     } 
    ] 
    }, 
    { 
    "key": "Series2", 
    "color": "#1f77b4", 
    "values": [ 
     { 
     "label" : "Group A" , 
     "value" : 25.307646510375 
     } , 
     { 
     "label" : "Group B" , 
     "value" : 16.756779544553 
     } , 
     { 
     "label" : "Group C" , 
     "value" : 18.451534877007 
     } , 
     { 
     "label" : "Group D" , 
     "value" : 8.6142352811805 
     } , 
     { 
     "label" : "Group E" , 
     "value" : 7.8082472075876 
     } , 
     { 
     "label" : "Group F" , 
     "value" : 5.259101026956 
     } , 
     { 
     "label" : "Group G" , 
     "value" : 0.30947953487127 
     } , 
     { 
     "label" : "Group H" , 
     "value" : 0 
     } , 
     { 
     "label" : "Group I" , 
     "value" : 0 
     } 
    ] 
    } 
] 

tôi thay lời gọi hàm số liệu() trong javascript để dữ liệu:

nv.addGraph(function() { 
    var chart = nv.models.multiBarChart(); 

    chart.xAxis 
     .tickFormat(d3.format(',f')); 

    chart.yAxis 
     .tickFormat(d3.format(',.1f')); 

    d3.select('#chart svg') 
     .datum(data) 
     .transition().duration(500).call(chart); 

    nv.utils.windowResize(chart.update); 

    return chart; 
}); 

Biểu đồ đúng cách gắn nhãn chuỗi của tôi nhưng không hiển thị các thanh. Biểu đồ này có thể không lấy loại dữ liệu này không? Tôi có dữ liệu của tôi làm việc với các thanh ngang, nhưng tôi muốn sử dụng các thanh dọc nếu có thể.

Answer 1

Nhóm/xếp chồng lên nhau biểu đồ thanh (các multiBarChart mô hình) được sử dụng với x và y thuộc tính, nơi y là chiều cao của quầy bar và x là nhãn và có thể có một số số hoặc một văn bản.

Rất tiếc, không có nhiều tài liệu về định dạng dữ liệu chính xác và tất cả các ví dụ tôi tìm thấy sử dụng một số chức năng khó hiểu để tạo dữ liệu. Vì vậy, đây là một ví dụ tôi đã làm việc sử dụng hỗn hợp số và văn bản nhãn:

var chart = nv.models.multiBarChart(); 
 
d3.select('#chart svg').datum([ 
 
    { 
 
    key: "S1", 
 
    color: "#51A351", 
 
    values: 
 
    [  
 
     { x : "A", y : 40 }, 
 
     { x : "B", y : 30 }, 
 
     { x : 5, y : 20 } 
 
    ] 
 
    }, 
 
    { 
 
    key: "S2", 
 
    color: "#BD362F", 
 
    values: 
 
    [  
 
     { x : "A", y : 60 }, 
 
     { x : "B", y : 50 }, 
 
     { x : 5, y : 70 } 
 
    ] 
 
    } 
 
]).transition().duration(500).call(chart);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"> 
 

 
<div id="chart" style="height: 200px;"><svg></svg></div>

---

Bây giờ có hai vấn đề với mã của bạn:

1. Bạn cần xóa tickFormat cho trục bạn dự định gắn nhãn bằng văn bản.
   Chức năng tickFormat đặt định dạng số cho nhãn của trục. Nó sẽ chỉ hoạt động nếu nhãn có thể được chuyển đổi thành một số và sẽ dẫn đến NaN trong trường hợp của bạn.

2. Bạn cần hoặc đổi tên label và value thuộc tính để x và y hoặc bạn cần để tạo ra các chức năng để cung cấp những giá trị:

   var chart = nv.models.multiBarChart(); 
   
   chart.x(function(d) { return d.label; }); 
   chart.y(function(d) { return d.value; }); 
   
   d3.select('#chart svg') 
       .datum(/* your data */) 
       .transition().duration(500).call(chart);