为什么项目符号图显示十进制数，而我们的范围为1

Why Bullet chart shows decimal number when we have range 1

本文关键字：我们 范围 符号 项目 显示 十进制数 为什么      更新时间：2023-09-26

我正在使用angularjs-nvd3指令库中的nvd3-bullet-chart来显示最大当前数据。如果我的最小数字大于 2，它将起作用。它显示整数。但是如果我的最大数量 = 1，那么它会显示十进制数。如何删除十进制数？任何帮助将不胜感激，谢谢。

var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
  $scope.options = {
    chart: {
      type: 'bulletChart',
      transitionDuration: 500,
      height: 70,
      margin: {
        top: 10,
        right: 10,
        bottom: 30,
        left: 125
      }
    },
    title: {
      enable: true,
      text: 'Title for Line Chart',
      css: {
        'text-align': 'center',
        'font-size': '12px'
      }
    }
  };
  $scope.dataset = {
    data: {
      "title": "Revenue",
      "subtitle": "US$, in thousands",
      "ranges": [1],
      "measures": [0],
      "markers": [0]
    },
    data2: {
      "title": "Revenue",
      "subtitle": "US$, in thousands",
      "ranges": [150, 225, 300],
      "measures": [220],
      "markers": [250]
    }
  }
});
<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://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
  <div ng-repeat="data in dataset">
    <nvd3 options="options" data="data"></nvd3>
  </div>
  <br><a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">See more</a>
</body>

这是一个 plunker。您可以看到第 1 行。

为什么不使用tickFormat？

下面是一个示例即时报价值 % 格式的代码片段：

var app = angular.module('app', ['nvd3']);
app.controller('MainCtrl', function($scope) {
  $scope.options = {
    chart: {
      type: 'bulletChart',
      transitionDuration: 500,
      height: 70,
      margin: {
        top: 10,
        right: 10,
        bottom: 30,
        left: 125
      },
      tickFormat: function(d) {
          return d3.format('%')(d);
      },
    },
    title: {
      enable: true,
      text: 'My Chart',
      css: {
        'text-align': 'center',
        'font-size': '14px'
      }
    }
  };
  $scope.data = {
      "title": "Revenue",
      "subtitle": "%",
      "ranges": [0, 1],
      "measures": [0.1],
      "markers": [0.5],
  }
});
<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8" />
    <title>Angular-nvD3 Bullet Chart</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.min.css"/>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.2/nv.d3.js"></script>
    <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.5/dist/angular-nvd3.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
  
      <nvd3 options="options" data="data"></nvd3>
  </body>
</html>

相关文章：