我有一个highcharts,根据我的数据库中的数据呈现数据.我正在使用'bar'类型.现在我希望当用户点击栏时它会重定向到特定页面或者例如另一个网站.我用Google搜索但无法得到答案.这是我正在使用的代码.
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +' millions';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
type: 'bar',
point: {
events: {
click: function(e) {
this.slice();
var clicked = this;
setTimeout(function(){
location.href = clicked.config[2];
}, 500)
e.preventDefault();
}
}
},
data: [['Com',107,'http://www.google.com']]
}]
});
});
});
Run Code Online (Sandbox Code Playgroud)
以下是有关如何执行此操作的文档的URL:http://api.highcharts.com/highcharts#plotOptions.series.point.events.click
这是一个很好的例子:http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-网址/
您要更新的代码部分位于:
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
point: {
events: {
click: function(){
// do whatever here
}
}
}
}
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
15706 次 |
| 最近记录: |