首页 > 代码库 > highchart添加事件
highchart添加事件
获取标题,当点击时弹窗
$(document).ready(function(){
var options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
renderTo:‘userage-chart‘,
type:‘column‘,
width:800
},
credits :{
text:‘‘
},
title: {
text: ‘年龄分布‘
},
xAxis: {
categories: [‘15岁以下‘,‘16-22岁‘,‘23-33岁‘,‘33-45岁‘,‘46岁以上‘]
},
yAxis: {
labels: {
formatter: function() {
return this.value;
}
},
min: 0,
title: {
text: ‘‘
}
},
exporting: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
},
tooltip: {
/* pointFormat: ‘{series.name}: <b>{point.y}</b><br/>‘ */
headerFormat: ‘<span style="font-size:10px">{point.key}</span><table>‘,
pointFormat: ‘<tr><td style="color:{series.color};padding:0">{series.name}: </td>‘ +
‘<td style="padding:0"><b>{point.y}</b></td></tr>‘,
footerFormat: ‘</table>‘,
shared: true,
useHTML: true
},
series: [{
name: ‘今年5月年龄分布‘,
data: [1257, 6781,8475, 7866, 3690]
},{
name: ‘去年5月年龄分布‘,
data: [257, 781,475, 866, 690]
}]
};
var chart = new Highcharts.Chart(options);
var text = options.title.text;
$("text").click(function(){
alert("这是标题");
})
$(".huanbi").click(function(){
options.series[0].name = ‘今年5月年龄分布‘;
options.series[1].name = ‘今年4月年龄分布‘;
options.series[0].data = http://www.mamicode.com/[1257, 6781,8475, 7866, 3690];
options.series[1].data = http://www.mamicode.com/[2157, 1781,2475, > chart = new Highcharts.Chart(options); //点击按钮后改变表格数值,再赋值给chart,即更新表格
})