2
我希望我的用户能够点击我的测量仪上的任何位置,然后对事件作出响应。如何将点击事件处理程序附加到整个HighCharts Gauge控件?
目前我正在使用以下绘图选项,但它只能使针规可点击。
关于如何配置它以使用整个标准区域的任何想法?我已更新我的代码以使用下面建议的方法,但未按预期方式附加单击事件。
我使用的指令,因为这里找到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);
});
}
}
});
感谢这给了我为一个更好的方法量表,但在我的情况下不起作用。我认为这是事实,我正在使用AngularJS指令创建图表。我已更新我的问题以反映完整图片。 –
但传统的jquery/div点击事件呢? http://jsfiddle.net/Z3huw/1/ –
您在图表上的原始点击事件诀窍。我的指令中有一些问题。工作结果可以在这里看到。 http://jsfiddle.net/Paladin_za/9Z2nd/ –