Nvd3.js - 將多個y軸添加到累積圖表

Question

我需要在我的累積Nvd3圖表中添加多個y軸，是否有人知道我需要修改的庫代碼的哪一部分？

如果你自己做了這件事並且可以提供一個Jsfiddle，那就更好了。

任何建議，將不勝感激。

Answer 1

只有具有多Y軸功能的特定圖表類型。

這不適用於累積折線圖。

但它可用於多圖表。 還有就是Angluar NVD3主頁上的例子在這里 ，但它顯示了條形和線條的例子。

我從主頁分叉了plunker示例，並將系列類型更改為所有行，以向您展示如何使用multi來實現與累積折線圖相同的結果。

（我也更改了數據集以簡化示例）

Pluker示例

第一件事是為多軸添加選項：

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

定義您的數據：

 $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}]}]

請注意，此處針對每個系列設置type和yAxis鍵。

正常設置<div> ：

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

就是這樣！

您將獲得與累積折線圖相同的圖表，但能夠設置多個軸。

Answer 2

如果您指的是將多個y軸添加到NVD3折線和條形圖中已有的單個圖表 。 部分代碼段如下所示。

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

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