Question

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

＆＃13;

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]
    }

  }
});

＆＃13;

<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>

＆＃13;

这是plunker。你可以看到第1行。

Answer 1

为什么不使用tickFormat？

以下是一个代码，用于举例说明刻度值的％格式：

＆＃13;

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],
  }
});

＆＃13;

<!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>

＆＃13;

当范围为1时，为什么子弹图表显示十进制数

1 个答案: