我正在使用chart.js / angular-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>
知道如何将一些参数传递给该事件以实际获取值吗?
完全控制器:
.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);
});
}
})
}
])
答案 0 :(得分: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 强>
答案 1 :(得分:1)
以下是一种对我有用的解决方案:单击条形图即可获取数据
$scope.clickBar = (points, evt, element) => {
if (element != undefined) {
console.log(points,evt,element);
}
};
答案 2 :(得分:0)
如果您仍需要帮助,则对于最新版本,可以使用以下标签:
$scope.onClick = function (points, evt) {
console.log(points[0]._view.label);
}