AngularJs:格式图表图轴

时间:2016-08-10 14:23:40

标签: javascript jquery angularjs charts format

我正在使用Flot chart和AngularJs来显示销售月份,需要在Y轴上格式化系列。

Y轴显示金额为5000,10000,15000,20000等的指针。

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

有人可以建议我如何格式化它们?

提前感谢!

1 个答案:

答案 0 :(得分:0)

我认为filter可以帮到你。我从this gist偷了一个。

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

步骤

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

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

//Your App
var app = angular.module('myapp', ['Utils']);

这可让您在HTML中使用thousandSuffix过滤器。

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