將Chart.js與AngularJS一起使用的Click事件

Question

嗨，我可以使用Chart.js添加一些數據集來繪制折線圖。

       <div class="row">
          <div class="col-md-9" id="line-chart" ng-controller="LineCtrl">
            <div class="panel panel-default" >
              <select ng-model="selec">
                <option value="aapl">AAPL(Apple)</option>
                <option value="goog">GOOG(Google)</option>
                <option value="amzn">AMZN(Amazon)</option>
              </select>
              <div class="panel-body">
                <canvas id="line" class="chart chart-line chart-xl" data="data" labels="labels" legend="true"
                click="onClick()" series="series"></canvas>
              </div>
            </div> 
          </div>

          <div class="col-md-3" id="txtfield" ng-controller="LineCtrl">
            <form class="form-horizontal" role="form">
             <div class="form-group">
              <label for="dates" class="col-sm-7 control-label">Date</label>
              <div class="col-sm-5">
               <input type="text" class="form-control" id="dates" ng-model="selecDate"
               placeholder="  "  readonly>
             </div>

這是在Json文件中設置的數據。

[
  {
    "date":"2011-06-29",
    "numOfTweet":4,
    "oldScore":5,
    "newScore":4,
    "percentage1":74.64788732,
    "appleClosePrice":45.01,
    "percentage2":-18.81363435
  },
  {
    "date":"2011-06-30",
    "numOfTweet":1,
    "oldScore":2,
    "newScore":1,
    "percentage1":-55.2238806,
    "appleClosePrice":45.23,
    "percentage2":24.43901355
  },

如果在圖形上移動光標，則會顯示一個包含標簽（日期）和點（數據）的工具提示。

我想讓我在一天中單擊圖形的點時，數據也將顯示在我已經創建的文本字段中（numOfTweet，分數，百分比等）。 如何顯示它如何操作controller.js或其他地方？

我的controller.js看起來像

app.controller('LineCtrl', ['$scope', '$http', function($scope, $http) {
  $http.get('stock/aapl.json').success(function(data) {
        $scope.selec = 'aapl'; //default as age
        $scope.series = ['Tweet Mood', 'Stock Market'];
        $scope.stocks = data;

        $scope.labels = [];
        $scope.createLabels = function() {
          for (var i = 0; i < $scope.stocks.length; i++) {
            $scope.labels.push($scope.stocks[i].date);
          }
        };  
        $scope.createLabels();

        $scope.data = [[], []];
        $scope.createGraphArray = function() {  
          for (var i = 0; i < $scope.stocks.length; i++) {
            $scope.data[0].push($scope.stocks[i].percentage1);
            $scope.data[1].push($scope.stocks[i].percentage2);
          }
        };
        $scope.createGraphArray();

        $scope.clickPredic = function() {  
          $scope.buySell = 'clicked';
        }; //button click test

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

        $scope.onHover = function (points) {
          if (points.length > 0) {
            console.log('Point', points[0].value);
          } else {
            console.log('No point');
          }
        };
    });
}]);

您可以在https://github.com/nnnick/Chart.js/blob/master/Chart.js中找到Chart.js，在此先感謝！

Answer 1

canvas元素上的click屬性需要回調。 在您的代碼中，將函數onClick的結果作為回調（未定義）而不是函數本身放入。 因此，基本上，您可以在代碼中刪除括號：

<canvas id="line" class="chart chart-line chart-xl" data="data" labels="labels" legend="true" click="onClick" series="series"></canvas>

希望這可以幫助，

干杯