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

Question

我正在使用Angularjs，Chartjs可以將貨幣綁定到scaleLabel。 在HTML中，我通常會

{{value | currency }} 

這是來自chartjs圖形選項的標簽

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

有沒有辦法代替硬編碼貨幣呢？

這是我在其中調用控制器和$ scopes的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  %>"

};

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/