javascript - 将 Chart.js 与 AngularJS 结合使用的点击事件

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');
          }
        };
    });
}]);

Chart.js 可在 https://github.com/nnnick/Chart.js/blob/master/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>

希望这有帮助，

干杯