將angularjs貨幣綁定到scaleLabel中chart.js

我正在使用Angularjs和Chartjs是否有將貨幣綁定到scaleLabel的方法。在HTML中我通常會做將angularjs貨幣綁定到scaleLabel中chart.js

{{value | currency }}

這是chartjs圖形選項

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

有沒有辦法做到這一點，而不是具有貨幣的硬編碼，請在標籤？

這是我的HTML中，我打電話控制器和$作用域

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

};

來源

2015-10-07 user2894034

你能添加控制器和chartjs的一些更多的代碼？ –

你是否想要問如何使chart.js的輸出使用角度貨幣過濾器？ – Claies

是的，這就是我問的。目前您可以在scaleLabel中看到：「<％='$'+ value％>」我現在使用了一個字符串'$'，我試圖改變它並使用angular的貨幣過濾器 – user2894034

你可以做到這一點，但是你必須添加一些代碼來完成一些全局對象的格式化（這種做法不適合維護）。這是你如何做到這一點

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功能的任何全局對象（我已經把它添加到圖JS全局對象）。所有你必須確定currencify是在你初始化圖表之前定義的（所以你也可以在myApp.run中這樣做）。

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

來源

2015-10-08 11:19:24 potatopeelings

謝謝，我會嘗試 – user2894034

將angularjs貨幣綁定到scaleLabel中chart.js

回答

相關問題