You can use click event
on chart:
How do I attach a click event handler to the whole HighCharts Gauge control?
-
30-05-2022 - |
Pregunta
I would like my users to be able to click anywhere on my gauge and then respond to the event.
Currently I am using the following plot options but it only makes the gauge needle clickable.
Any ideas on how to configure this to use the whole gauge area? I have updated my code to make use of the method suggested below, but the click event is not being attached as expected.
I am using the directive as found here https://github.com/rootux/angular-highcharts-directive
angular.module('chartsExample.directives',[])
.directive('gauge', function () {
return {
restrict: 'E',
template: '<div></div>',
transclude: true,
replace: true,
link: function (scope, element, attrs) {
var chartsDefaults = {
chart: {
renderTo: element[0],
type: "gauge",
height: attrs.height || null,
width: attrs.width || null,
cursor: 'pointer',
events:{
click:function(){
alert('click');
}
}
}
};
//Update when charts data changes
scope.$watch(function() { return attrs.value; }, function(value) {
if(!attrs.value) return;
// We need deep copy in order to NOT override original chart object.
// This allows us to override chart data member and still the keep
// our original renderTo will be the same
var deepCopy = true;
var newSettings = {};
$.extend(deepCopy, newSettings, chartsDefaults, JSON.parse(attrs.value));
var chart = new Highcharts.Chart(newSettings);
});
}
}
});
Solución
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow