Angular-nvD3 条形图 y 轴缩放错误 (AngularJS)

Posted

技术标签:

【中文标题】Angular-nvD3 条形图 y 轴缩放错误 (AngularJS)【英文标题】：Angular-nvD3 Bar Chart y-axis Scaling Bug (AngularJS) 【发布时间】：2016-08-13 14:52:50 【问题描述】：

我有一个创建一个离散条形图的应用程序。由于某种我无法解释的原因（这似乎是库中的内部错误），y 轴缩放到一个数据值，该值不是数组中整数的最高值（在我的数组中，它缩放到 5674 而不是 25797）。我该如何修复这个错误？谢谢。

我的数据样本（fetched-data.json）：

["0":"1","1":"323","ID":"1","STOCK":"323","0":"2","1":"1401","ID":"2","STOCK":"1401","0":"3","1":"5674","ID":"3","STOCK":"5674","0":"4","1":"25797","ID":"4","STOCK":"25797"]

HTML 示例 (app.html)：

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>Angular-nvD3 Bar Chart</title>
    <script data-require="lodash.js@4.6.1" data-semver="4.6.1" src="https://cdn.jsdelivr.net/lodash/4.6.1/lodash.js"></script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <nvd3 options="barOptions" data="barData"></nvd3>
  </body>

</html>

我的控制器示例 (app.js)：

var app = angular.module('myApp', ['nvd3']);

app.controller('MainCtrl', ['$scope', 'services', function($scope, services)      
    $scope.barData = [];

    var stock = 
      key: 'Product stock',
      values: []
    ;

    stock.values = _.map(data.data, function(prod) 
      return 
        label: prod.ID,
        value: prod.STOCK
      ;
    );
    console.log(stock);
    $scope.barData.push(stock);
  );

  $scope.barOptions = 
    chart: 
      type: 'discreteBarChart',
      height: 450,
      margin : 
        top: 20,
        right: 20,
        bottom: 50,
        left: 55
      ,
      x: function(d)return d.label;,
      y: function(d)return d.value;,
      showValues: true,
      valueFormat: function(d)
        return d3.format(',.4f')(d);
      ,
      duration: 500,
      xAxis: 
        axisLabel: 'X Axis'
      ,
      yAxis: 
        axisLabel: 'Y Axis',
        axisLabelDistance: -10
      
    
  ;
])

.factory('services', ['$http', function($http)
  var serviceBase = 'services/'
  var object = ;
  object.getData = function()
    return $http.get('fetched-data.json');
  ;
  return object;
]);

【问题讨论】：

【参考方案1】：

* UPDATE * （同时，我找到了解决方案。我必须回答我自己的问题。）

只需通过向图表选项添加以下选项来强制 Y 最大值：

yDomain: [0, 25797]

我在这里找到了这个“错误”的解决方案：https://github.com/krispo/angular-nvd3/issues/47

【讨论】：

以上是关于Angular-nvD3 条形图 y 轴缩放错误 (AngularJS)的主要内容，如果未能解决你的问题，请参考以下文章

Python。在 Seaborn Facetgrid 上使用两个 y 轴绘制线图和条形图

在ggplot2中手动更改复杂堆叠条形图上y轴项目的顺序

根据ggplot2中最后一个分面网格的递减值对条形图的Y轴进行排序

堆叠条形图的 Y 比例域最小值/最小值不为零； X 轴溢出

powerbi簇状条形图,如何去掉x轴字段

将 y 轴移动到中间并在每侧制作两个图例以用于 Plotly 发散条形图