Nvd3.js-向累积图表添加多个y轴

Question

我需要在我的累积Nvd3图表中添加多个y轴，有人知道我需要修改库代码的哪一部分吗？

如果您自己已经完成此操作并可以提供Jsfiddle，则更好。

任何建议都将不胜感激。

- martin

---

你是否计划更改nvd3库...如果是这样，你将永远无法升级。 - Cyril Cherian

谢谢，我也遇到了同样的情况。 - Ranjith Siji

@martin 有更新吗？我也处于同样的情况。 - ShaMoh

@ShaMoh 不，我必须手动完成它 - martin

@martin 如果你能分享一下示例代码，那就太好了。 - ShaMoh

@ShaMoh付钱请别人做了，所以不是我 :) - martin

Answer 1

只有特定类型的图表具有多个 Y 轴的功能。

Cumulative Line Chart 不支持此功能。

然而，Multi-chart 支持此功能。 Angluar NVD3 的主页上有一个示例 here，但它显示了带有条形和折线的示例。

我从主页中 fork 了 plunker 示例，并将序列类型更改为所有线条，以向您展示如何使用多个轴来实现与 Cumulative Line Chart 相同的结果。（我还更改了数据集以简化示例）

第一件事是添加多个轴的选项： Pluker Example

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

就是这样！

您将获得与累积线图相同的图表，但能够设置多个轴。

- Stacey Burns

Answer 2

如果您正在讨论将多个y轴添加到已经存在的单个图表中，那么在NVD3线形和柱状图中已经有了这个功能。下面是部分代码片段。

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

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

- lazy