【问题标题】:How to know min max value of a chart axis in nvd3 chart如何知道 nvd3 图表中图表轴的最小最大值
【发布时间】:2017-04-24 10:31:01
【问题描述】:

我正在使用角度 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
                    }
                ]
            }
        ];

提前致谢

【问题讨论】:

  • 您的数据在哪里?您不能简单地获取数据数组的最小值和最大值吗?
  • 数据将是一系列年份作为 x 轴和一些值作为 y 轴,但我无法在图表中一次显示整个数据所以我将一次加载有限的数据并且然后是下一个按钮上的其余数据
  • 然后获取这部分的最小值和最大值数据
  • 我的数据是这样的: $scope.data = [{ key: "Cumulative Return", values: [{ "label" : "2010" , "value" : -29.765957771107 } , { “标签”:“2011”,“价值”:0 }]}
  • 然后获取$scope.data.values的最小值和最大值

标签: javascript angularjs charts nvd3.js


【解决方案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)));

【讨论】:

  • 我不知道我错在哪里,但我正在尝试这个......$scope.loadNext= function(){ var max = Math.max($scope.data[0 ].values.map(v=>v.label));控制台日志(最大); };它仍然返回 NaN
  • 是的,我是多么愚蠢,现在它工作正常非常感谢 Weedoze,对我的耐心。
  • 抱歉回复晚了,因为您在上一个查询中帮助了我,而且效果很好,但现在我正在 Explorer 上对其进行测试,它在 Math.max(...$scope .data[0].values.map(v=>v.label));
  • @ShaliniSengar 是的,你是对的,你应该使用 Babel 之类的东西来编译它或使用 polyfill 函数
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-06-20
  • 2013-03-07
  • 2013-12-04
  • 1970-01-01
  • 2012-06-29
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多