2016-10-31 6 views
2

私は、円グラフの一部のデータを表示するためにchart.js /アンギュラchart.jsを使用しています。chart.jsチャートクリックパスパラメータ

私は、ユーザーがクリックイベントが選択したチャート値をコピーしますチャートのパイの中にラベルをクリックします機能を必要とします。

私はこのアクションでイベントをトリガすることができるよ:

$scope.chartClick = function() { 
       alert('ok'); 
      } 

そして、これは私が持っているマークアップです:私はそのイベントにいくつかのパラメータを渡すことができますどのように

<canvas id="pie" class="chart chart-pie" 
        chart-data="data" chart-labels="labels" display="true" chart-click="chartClick()" chart-options="options"></canvas> 

任意のアイデア実際に値を取得する?事前に

おかげで、

EDIT Laziale:

全コントローラ:

.controller('InvestorLtvReportController', [ 
    '$scope', '$http', '$state', function ($scope, $http, $state) { 
     $scope.labels = []; 
     $scope.data = []; 
     $scope.options = { 
      legend: { 
       display: true, 
       position: 'bottom', 
       labels: { 
        fontColor: 'rgb(255, 99, 132)' 
       } 
      } 
     }; 

     $scope.chartClick = function (points, evt) { 
      console.log(points, evt); 
     }; 

     $http({ 
       url: 'http://myapi/api/Manage/GetUserRole', 
       method: "GET" 
      }).success(function (data, status) { 
       $scope.isInvestor = false; 
       angular.forEach(data, function (value, key) { 
        if (value == 'Investor') { 
         $scope.isInvestor = true; 
        } 
       }); 

       if (!$scope.isInvestor) { 
        $state.go('accountlogin'); 
       } else { 
        $http({ 
         url: 'http://myapi/api/investor/GetInvestorLtvReport', 
         method: "GET" 
        }).success(function (data, status) { 

         angular.forEach(data, function (value, key) { 
          $scope.labels.push(value.Amortisation); 
          $scope.data.push(value.PercOfFund); 
         }); 
        }).error(function (data, status) { 
         console.log(data); 
        }); 
       } 
      }) 
    } 
]) 

答えて

3

あなたがこれを行うことができ、

<canvas id="pie" chart-click="onClick" class="chart chart-pie"chart-data="data" chart-labels="labels"></canvas> 

コントローラー:

app.controller('AppCtrl', ['$scope', function($scope){ 
    $scope.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"]; 
    $scope.data = [300, 500, 100]; 
    $scope.onClick = function (points, evt) { 
    console.log(points, evt); 
    }; 
}]); 

DEMO

あなたの助けを
+0

こんにちは@sajeetharanのTHX私はラベルを持っているが、あなたがhttps://i.gyazo.com/946c26eea34b0c027f78426864547607.png – Laziale

+0

スクリーンショットから見ることができるように、私は未定義の未定義取得しています@ Lazialeあなたはデモを添付して確認しましたか? – Sajeetharan

+0

私はそれがうまく動作することを参照してください、私は動的にラベルを取得している、あなたはそれが違いをもたらすかもしれないと思いますか? – Laziale