文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么项目符号图表显示十进制数字，而我们的范围是1

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

Stack Overflow用户

提问于 2016-03-05 11:22:40

回答 1查看 148关注 0票数 0

我正在使用angularjs-nvd3-directives库中的nvd3-bullet-chart来显示最大当前数据。如果我有一个大于2的最小数字，它将工作。如果我有最大数字= 1，它显示整个number.But，然后它显示十进制数。如何删除十进制数？任何帮助都会很感谢，谢谢。

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。您可以看到第一行。

angular-nvd3

javascript

angularjs

nvd3.js

回答 1

Stack Overflow用户

发布于 2016-03-07 20:36:01

为什么不使用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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35809597

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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