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

Posted 2023-02-22

【中文标题】Nvd3.js - 向累积图表添加多个 y 轴

【英文标题】：Nvd3.js - Adding multiple y-axis to cumulative chart

【发布时间】：2015-11-17 06:05:28

【问题描述】：

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

如果你自己做这个并且可以提供一个 Jsfiddle，那就更好了。

任何建议将不胜感激。

【问题讨论】：

您是否也打算更改 nvd3 库...在这种情况下您将永远无法升级。

谢谢我也遇到了同样的情况。

@martin 对此有何更新？？我也有同样的情况

@ShaMoh 不，我必须手动完成

@martin 如果您分享示例代码，这将非常有帮助

【参考方案1】：

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

这不适用于累积折线图。

但它可用于多图表。 Angluar NVD3 主页here 上有一个示例，但它显示了带有条形和线条的示例。

我从主页分叉了 plunker 示例并将系列类型更改为全线，以向您展示如何使用 multi 来实现与累积折线图相同的结果。

（我也更改了数据集以简化示例）

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>

就是这样！

您将获得与使用累积折线图相同的图表，但可以设置多个轴。

【参考方案2】：

如果您指的是向 NVD3 line and bar chart 中已有的单个图表添加多个 y 轴。部分代码sn-p如下所示。

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

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