Question

我正在使用Angularjs和Chartjs有一种方法将货币绑定到scaleLabel。在Html中，我通常会这样做

{{value | currency }}

这是chartjs图表选项中的标签

scaleLabel: "<%= '$' + value  %>"

有没有办法做到这一点而不是硬币编码？

这是我的HTML，我正在调用控制器和$ scopes

<div ng-controller="ChartJSController" class="container-fluid">
<div class="row mb-lg">
    <div class="col-lg-12">
        <div>
            <canvas linechart="" options="lineOptions" data="rev" height="667" responsive="true"></canvas>
        </div>
    </div>
</div>

这是图表数据

    $scope.revenueToday = {
    labels: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00'],
    datasets: [
      {
          label: 'My Second dataset',
          fillColor: 'rgba(35,183,229,0.2)',
          strokeColor: 'rgba(35,183,229,1)',
          pointColor: 'rgba(35,183,229,1)',
          pointStrokeColor: '#fff',
          pointHighlightFill: '#fff',
          pointHighlightStroke: 'rgba(35,183,229,1)',
          data: log

      }
    ]
};

这就是我设置图表选项的地方

    $scope.lineOptions = {
    scaleShowGridLines: true,
    scaleGridLineColor: 'rgba(0,0,0,.05)',
    scaleGridLineWidth: 1,
    bezierCurve: true,
    bezierCurveTension: 0.4,
    pointDot: true,
    pointDotRadius: 4,
    pointDotStrokeWidth: 1,
    pointHitDetectionRadius: 20,
    datasetStroke: true,
    datasetStrokeWidth: 2,
    datasetFill: true,
    scaleLabel: "<%= '$' + value  %>"

};

Answer 1

你可以做到这一点，但是你必须解决你的一些代码，这些代码会对一些全局对象进行格式化（IMO不是很容易维护）。你就是这样做的

myApp.controller('myCtrlr', ['$filter', '$scope', function ($filter, $scope) {
    Chart.currencify = function(value) {
        return $filter('currency')(value);
    }
    ...
    ...
    var myChart = new Chart(ctx).Line(data, {
        scaleLabel: "<%=Chart.currencify(value)%>",
    });
}]);

您可以将currencify函数添加到任何全局对象（我已将其添加到Chart js全局对象）。您必须确保在初始化图表之前定义currencify（因此您也可以在myApp.run中执行此操作。）

小提琴 - http://jsfiddle.net/fntcdtve/

将angularjs货币绑定到chart.js中的scaleLabel

1 个答案: