[英]Click event using Chart.js with AngularJS
Hi I can draw a line chart with Chart.js adding some data set. 嗨,我可以使用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>
and this is data set in Json file. 这是在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
},
If I move the cursor on the graph it shows a tooltip involving the label(date) and point(data). 如果在图形上移动光标,则会显示一个包含标签(日期)和点(数据)的工具提示。
I wanna make that if I click the point of graph in the day the data will be shown in a textfields I already made (numOfTweet, scores, percentages and so on) as well. 我想让我在一天中单击图形的点时,数据也将显示在我已经创建的文本字段中(numOfTweet,分数,百分比等)。 How can I show it manipulating controller.js or somewhere else?
如何显示它如何操作controller.js或其他地方?
my controller.js looks like 我的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 is available in https://github.com/nnnick/Chart.js/blob/master/Chart.js Thanks in advance! 您可以在https://github.com/nnnick/Chart.js/blob/master/Chart.js中找到Chart.js,在此先感谢!
The click
attribute on the canvas element is expecting a callback. canvas元素上的
click
属性需要回调。 In your code, you put the result of the function onClick
as a callback (undefined), not the function itself. 在您的代码中,将函数
onClick
的结果作为回调(未定义)而不是函数本身放入。 So basically, you can remove the paranthesis in your code : 因此,基本上,您可以在代码中删除括号:
<canvas id="line" class="chart chart-line chart-xl" data="data" labels="labels" legend="true" click="onClick" series="series"></canvas>
Hope this helps, 希望这可以帮助,
Cheers 干杯
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.