如何在高图中超链接条形图 [英] How to hyperlink bar graph in highcharts
问题描述
我有一个根据数据库中的数据呈现数据的高图。我正在使用'bar'类型。现在,我希望当用户点击栏时,它会重定向到特定的页面或例如另一个网站。我用Google搜索了它,但无法得到答案。这是我使用的代码。
$(function(){
var chart;
$ (document).ready(function(){
chart = new Highcharts.Chart({
chart:{
renderTo:'container',
type:'bar'
$ b标题:{
text:'各地区的历史世界人口'
},
副标题:{
text:'来源:Wikipedia.org'
},
xAxis:{
categories:['Africa','America','Asia','Europe','Oceania'],
title:{
text:null
}
},
yAxis:{
min:0,
title:{
text:'人口(百万)' ,
align:'high'
},
标签:{
overflow:'justify'
}
},
到oltip:{
formatter:function(){
return''+
this.series.name +':'+ this.y +'millions';
plotOptions {
bar:{
dataLabels:{
enabled:true
}
}
},
图例:{
layout:'vertical',
align:'right',
verticalAlign:'top',
x:-100,
y:100,
floating:true,
borderWidth:1,
backgroundColor:'#FFFFFF',
shadow:true
},
学分:{
启用:false
},
系列:[{
type:'bar',
point:{
events:{
点击:函数(e){
this.slice();
var clicked = this;
setTimeout(function(){
location.href = clicked.config [2];
},500)
e.preventDefault();
}
}
},
data:[[''Com',107,'http://www.google.com']]
}]
});
});
});
以下是关于如何执行文档的网址这: http://api.highcharts.com/highcharts#plotOptions.series .point.events.click
您想要更新的代码部分位于以下位置:
plotOptions:{
bar:{
dataLabels:{
enabled:true
}
},
series:{
point:{
events:{
点击:function(){
//在这里做任何事
}
}
}
}
}
code>
I have a highcharts that renders data according to data in my database. I am using the type 'bar'. Now i want that when users click on the bar it will redirect to the specific page or forexample another website.I've googled it but couldn't get the answer. Here is the code i am using.
$(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']]
}]
});
});
});
Here is the url of the documentation on how to do this: http://api.highcharts.com/highcharts#plotOptions.series.point.events.click
Here is a good sample: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-url/
The part of your code you want to update is here:
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
point: {
events: {
click: function(){
// do whatever here
}
}
}
}
}
这篇关于如何在高图中超链接条形图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!