highcharts在angularjs中 点击事件不起作用
需求:点击某个柱状图,显示该列数据的详情,查阅了文档,代码如下,但是click事件没有触发,请问是怎么回事?
highcharts directive:
angular.module('myapp')
.directive('chart',function(){
return{
restrict:'AE',
replace:true,
scope:{
option:'@'
},
link:function(scope,element,attr){
function init(){
var option=JSON.parse(scope.option);
//这里打印的option中events是空的,问题出在这,不知道什么原因
option.chart = option.chart || {};
option.chart.renderTo = option.chart.renderTo || element[0];
var chartObj = new Highcharts.Chart(option);
}
init();
attr.$observe("option",function(){
init();
})
}
}
})
$scope.option = {
chart:{
type: 'column'
},
title: {
text: '',
x: -20,
},
subtitle: {
text: '统计',
x: -20,
style: {
fontFamily: '微软雅黑'
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
},
tooltip: {
valueSuffix: '',
style: {
fontFamily: '微软雅黑'
}
},
xAxis: {
categories: [],
gridLineWidth: 0,
labels: {
style: {
fontFamily: '微软雅黑',
color: '#666',
fontSize: '12px'
}
}
},
yAxis: {
title: {
text: '次数'
},
//tickInterval: 2
allowDecimals: false
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
}
}
},
series: [
{
type: 'column',
data: []
}
],
credits: {
enabled: false
},
lang: {
noData: "暂无数据",
},
noData: {
style: {
fontWeight: 'bold',
fontSize: '25px',
color: '#303030'
}
}
}
$scope.search = function(){
$http.get(url).success(function(res){
$scope.option.xAxis.categories = getXarray(res);
$scope.option.series[0].data = getData(res);
})
}
function getData(data){
var temp = [];
angular.forEach(data, function (item) {
temp.push(item.count)
})
return temp;
}
function getXarray(data) {
var temp = [];
angular.forEach(data,function(item){
temp.push(item.name)
})
return temp;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论