首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >AngularJs:格式化Flot chart轴

AngularJs:格式化Flot chart轴
EN

Stack Overflow用户
提问于 2016-08-10 22:23:40
回答 1查看 110关注 0票数 0

我正在使用Flot chart与AngularJs显示销售月份的智慧,需要格式化系列在Y轴。

Y轴显示5,000,10000,15000,20000等数量的指针。

现在我需要格式化这些数量为5K,10K,15K,20K等。

有人能建议我如何格式化它们吗?

提前感谢!

EN

回答 1

Stack Overflow用户

发布于 2016-08-11 01:34:22

我认为filter可以在这方面帮助你。我从this gist那里偷了一个。

Plunker:https://plnkr.co/edit/zAHjMYosnCEjFgQ8yQVA?p=preview

步骤

您可以在新模块中添加筛选器。例如,将其命名为Utils

代码语言:javascript
复制
//filter dependency
angular.module('Utils', [])
  .filter('thousandSuffix', function () {
    return function (input, decimals) {

      var exp, rounded, suffixes = ['K', 'M', 'G', 'T', 'P', 'E'];

      if(window.isNaN(input)) {
        return null;
      }

      if(input < 1000) {
        return input;
      }

      exp = Math.floor(Math.log(input) / Math.log(1000));

      return (input / Math.pow(1000, exp)).toFixed(decimals) + suffixes[exp - 1];
    };
  });

现在你可以在你的应用中引用Utils了。

代码语言:javascript
复制
//Your App
var app = angular.module('myapp', ['Utils']);

这将使您能够在您的超文本标记语言中使用thousandSuffix过滤器。

代码语言:javascript
复制
//Your Controller
app.controller('MyCtrl', function($scope){
  $scope.yNums = [5000, 10000, 15000, 20000];
});

//Your HTML
<body ng-app="myapp">
    <div ng-controller="MyCtrl">
      <p>The y axis numbers are:</p>
      <ul>
        <li ng-repeat="num in yNums">{{num | thousandSuffix}}</li>
      </ul>
    </div>
</body>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38876144

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档