如何知道 nvd3 图表中图表轴的最小最大值

Question

我正在使用 angular nvd3 图表并想要检索 x 轴最小值和最大值，这样当我单击自定义下一步按钮时，新的 x 轴值将被加载并且图表将显示下一个值范围...

我被困在这里，因为我找不到获取当前 x 轴的最小最大值的方法

这是我的代码...

angular.module('sbAdminApp', ['nvd3'])
.controller('DemoCtrl', ['$rootScope', '$scope', '$timeout', function 
($rootScope, $scope, $timeout){
$rootScope.curlabel = "year";
$scope.curformat = "mon"
$scope.options = {
        chart: {
            type: 'discreteBarChart',
            height: 450,
            staggerLabels: false,
            x: function(d){return d.label;},
            y: function(d){return d.value;},
            showValues: true,
            valueFormat: function(d){ return d3.format(',.4f')(d); },
            dispatch: {
              tooltipShow: function(e){ console.log('! tooltip SHOW !')},
              tooltipHide: function(e){console.log('! tooltip HIDE !')},
              beforeUpdate: function(e){ console.log('! before UPDATE !')}
            },
            discretebar: {
              dispatch: {
                //chartClick: function(e) {console.log("! chart Click !")},
                elementClick: function(d) {
                    //console.log(d);
                    var labelValue = d.data.label;
                    $scope.newchart($rootScope.curlabel, labelValue);

                    }

              }
            },
            zoom: {
                enabled: true,
                scaleExtent: [1, 10],
                useFixedDomain: false,
                useNiceScale: false,
                horizontalOff: false,
                verticalOff: true,
                unzoomEventType: 'dblclick.zoom'
            }

        }
    };

$scope.data = [
            {
                key: "Cumulative Return",
                values: [
                    {
                        "label" : 2010 ,
                        "value" : -29.765957771107
                    } ,
                    {
                        "label" : 2011 ,
                        "value" : 0
                    } ,
                    {
                        "label" : 2012 ,
                        "value" : 32.807804682612
                    } ,
                    {
                        "label" : 2013 ,
                        "value" : 196.45946739256
                    } ,
                    {
                        "label" : 2014 ,
                        "value" : 0.19434030906893
                    } ,
                    {
                        "label" : 2015,
                        "value" : -98.079782601442
                    } ,
                    {
                        "label" : 2016 ,
                        "value" : -13.925743130903
                    } ,
                    {
                        "label" : 2017 ,
                        "value" : -5.1387322875705
                    },
                    {
                        "label" : 2018 ,
                        "value" : -5.1387322875705
                    },
                    {
                        "label" : 2019 ,
                        "value" : -5.1387322875705
                    }
                ]
            }
        ];

提前致谢

Answer 1

您可以直接从数据数组中获取最小值和最大值

const data = [{
  key: "Cumulative Return",
  values: [{
      "label": 2010,
      "value": -29.765957771107
    },
    {
      "label": 2011,
      "value": 0
    },
    {
      "label": 2012,
      "value": 32.807804682612
    },
    {
      "label": 2013,
      "value": 196.45946739256
    },
    {
      "label": 2014,
      "value": 0.19434030906893
    },
    {
      "label": 2015,
      "value": -98.079782601442
    },
    {
      "label": 2016,
      "value": -13.925743130903
    },
    {
      "label": 2017,
      "value": -5.1387322875705
    },
    {
      "label": 2018,
      "value": -5.1387322875705
    },
    {
      "label": 2019,
      "value": -5.1387322875705
    }
  ]
}];

console.log(Math.max(...data[0].values.map(v=>v.label)));
console.log(Math.min(...data[0].values.map(v=>v.label)));

如何知道 nvd3 图表中图表轴的最小最大值

How to know min max value of a chart axis in nvd3 chart

javascript

angularjs

charts

nvd3.js