无法获取 angular 堆叠条形图中图表单击的系列值
Unable to get series vale for chart-click in angular stacked bar graph
<canvas class="chart chart-bar" chart-data="data" chart-labels="labels"
chart-options="options" chart-series="series" chart-click="onclick"></canvas>
'use strict';
var app = angular.module('examples', ['chart.js', 'ui.bootstrap']);
app.controller('StackedBarCtrl', ['$scope', function ($scope) {
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
$scope.type = 'StackedBar';
$scope.series = ['2015', '2016'];
$scope.options = {
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
};
$scope.onclick = function(points,evt)
{
console.log("evt "+points[0]["_modal"]["datasetLabel"]);
}
$scope.data = [
[65, 59, 90, 81, 56, 55, 40],
[28, 48, 40, 19, 96, 27, 100]
];
}]);
如果我点击第 28 栏,我没有获得值 2016,因为 onclick 函数中的点数组 return 每个堆栈都有 2 个对象,我无法弄清楚如何获得值 2016,因为那里没有标志指示点击了哪个栏
传递给您的 onclick
回调的第二个参数包含活动元素数组,其中的每个项目包含 _datasetIndex
和 _index
array[1]
[Element]
_datasetIndex:0
_index: 0
使用这些值你可以获得你需要的值
$scope.onclick = function(event, elems)
{
var datasetIndex = elems[0]._datasetIndex;
console.log("evt " + $scope.series[datasetIndex]);
}
请参考与您的问题相关的chartjs docs and this issue
更新
看起来堆叠条形图有点棘手。解决方案是使用 Chart.helpers
找到最近的点击栏
$scope.$on('chart-create', function(event, instance){
// used to obtain chart instance
$scope.chart = instance.chart;
});
$scope.onclick = function(elements,e)
{
// helper function that translates an event to a position in canvas coordinates
var pos = Chart.helpers.getRelativePosition(e, $scope.chart);
// inRange is the function on the chart element that is used for hit testing
var intersect = elements.find(function(element) {
return element.inRange(pos.x, pos.y);
});
if(intersect){
alert('You clicked ' + $scope.labels[intersect._index] + ' ' + $scope.series[intersect._datasetIndex]);
}
}
这是工作plunkr
<canvas class="chart chart-bar" chart-data="data" chart-labels="labels"
chart-options="options" chart-series="series" chart-click="onclick"></canvas>
'use strict';
var app = angular.module('examples', ['chart.js', 'ui.bootstrap']);
app.controller('StackedBarCtrl', ['$scope', function ($scope) {
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
$scope.type = 'StackedBar';
$scope.series = ['2015', '2016'];
$scope.options = {
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
};
$scope.onclick = function(points,evt)
{
console.log("evt "+points[0]["_modal"]["datasetLabel"]);
}
$scope.data = [
[65, 59, 90, 81, 56, 55, 40],
[28, 48, 40, 19, 96, 27, 100]
];
}]);
如果我点击第 28 栏,我没有获得值 2016,因为 onclick 函数中的点数组 return 每个堆栈都有 2 个对象,我无法弄清楚如何获得值 2016,因为那里没有标志指示点击了哪个栏
传递给您的 onclick
回调的第二个参数包含活动元素数组,其中的每个项目包含 _datasetIndex
和 _index
array[1]
[Element]
_datasetIndex:0
_index: 0
使用这些值你可以获得你需要的值
$scope.onclick = function(event, elems)
{
var datasetIndex = elems[0]._datasetIndex;
console.log("evt " + $scope.series[datasetIndex]);
}
请参考与您的问题相关的chartjs docs and this issue
更新
看起来堆叠条形图有点棘手。解决方案是使用 Chart.helpers
$scope.$on('chart-create', function(event, instance){
// used to obtain chart instance
$scope.chart = instance.chart;
});
$scope.onclick = function(elements,e)
{
// helper function that translates an event to a position in canvas coordinates
var pos = Chart.helpers.getRelativePosition(e, $scope.chart);
// inRange is the function on the chart element that is used for hit testing
var intersect = elements.find(function(element) {
return element.inRange(pos.x, pos.y);
});
if(intersect){
alert('You clicked ' + $scope.labels[intersect._index] + ' ' + $scope.series[intersect._datasetIndex]);
}
}
这是工作plunkr