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的结果作为回调（未定义），而不是函数本身。基本上，您可以删除代码中的paranthesis：

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

希望这有帮助，

干杯

使用带有AngularJS的Chart.js单击事件

1 个答案: