Как сделать гиперссылку на гистограмму в старших графиках
У меня есть высокие графики, которые отображают данные в соответствии с данными в моей базе данных. Я использую тип "бар". Теперь я хочу, чтобы, когда пользователи нажимали на панель, она перенаправляла на конкретную страницу или, например, на другой веб-сайт. Я гуглил, но не смог получить ответ. Вот код, который я использую.
$(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']]
}]
});
});
});
2 ответа
Вот URL документации о том, как это сделать: http://api.highcharts.com/highcharts
Вот хороший пример: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-url/
Часть вашего кода, которую вы хотите обновить, находится здесь:
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
point: {
events: {
click: function(){
// do whatever here
}
}
}
}
}
Uncaught TypeError: Object #<Object> has no method 'slice'
Это ошибка, сгенерированная следующей строкой.
this.slice();
Убери это.
Демонстрация выше вызовет клик только для той серии, с которой вы связываете события, если вы хотите связать ее со всеми сериями, используйте предложение @Jamiec.