Nvd3.js - Thêm nhiều trục y vào biểu đồ tích lũy

Question

Tôi cần phải thêm nhiều trục y vào biểu đồ tích lũy Nvd3 của mình, có ai biết phần nào của mã của thư viện tôi cần sửa đổi không?

Thậm chí tốt hơn là nếu bạn đã tự làm điều này và có thể cung cấp Jsfiddle.

Mọi đề xuất sẽ được đánh giá cao.

Answer 1

Nếu bạn đang đề cập đến việc thêm nhiều trục y vào biểu đồ đơn đã có sẵn trong NVD3 line and bar chart. Đoạn mã một phần được hiển thị bên dưới.

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

     chart.y2Axis 
      .tickFormat(function(d) { return '$' + d3.format(',f')(d) }); 

Answer 2

Chỉ có các loại biểu đồ cụ thể có chức năng đa trục Y.

Điều này không có sẵn cho Biểu đồ đường tích lũy.

Tuy nhiên, nó có sẵn cho Biểu đồ nhiều. Có một ví dụ trên trang chủ Angluar NVD3 here nhưng nó cho thấy ví dụ với các thanh và đường kẻ.

Tôi chia nhỏ ví dụ plunker khỏi trang chủ và thay đổi loại chuỗi thành tất cả các dòng để cho bạn thấy cách bạn có thể sử dụng đa để đạt được kết quả tương tự như biểu đồ đường tích lũy.

(Tôi cũng đã thay đổi dữ liệu thiết lập để đơn giản hóa ví dụ)

Pluker Example

Việc đầu tiên là thêm các tùy chọn cho nhiều trục:

$scope.options = { 
      chart: { 
       type: 'multiChart', 
       height: 450, 
       margin : { 
        top: 30, 
        right: 60, 
        bottom: 50, 
        left: 70 
       }, 
       color: d3.scale.category10().range(), 
       //useInteractiveGuideline: true, 
       transitionDuration: 500, 
       xAxis: { 
        tickFormat: function(d){ 
         return d3.format(',f')(d); 
        } 
       }, 
       yAxis1: { 
        tickFormat: function(d){ 
         return d3.format(',.1f')(d); 
        } 
       }, 
       yAxis2: { 
        tickFormat: function(d){ 
         return d3.format(',.1f')(d); 
        } 
       } 
      } 
     }; 

Xác định dữ liệu của bạn:

$scope.data = [{key: 'series1', type: "line", yAxis: 1, values:[{x: 10, y: 20}, {x: 20, y: 35}, {x: 30, y:18}]}, 
     {key: 'series2', type: "line", yAxis: 1,values:[{x: 10, y: 12}, {x: 20, y: 26}, {x: 30, y: 15}]}, 
     {key: 'series3', type: "line", yAxis: 2,values:[{x: 10, y: 0.75}, {x: 20, y: 0.9}, {x: 30, y: 0.8}]}, 
     {key: 'series4', type: "line", yAxis: 2,values:[{x: 10, y: 0.2}, {x: 20, y: 0.3}, {x: 30, y: 0.4}]}] 

Lưu ýCác phím 10 và yAxis được đặt ở đây với mỗi chuỗi.

Đặt <div> của bạn như bình thường:

<nvd3 options="options" data="data"></nvd3> 

Và đó là nó!

Bạn sẽ nhận được cùng biểu đồ như bạn thực hiện với Biểu đồ đường tích lũy nhưng khả năng đặt nhiều trục.