我正在尝试使xAxis标签可点击与plotOptions可点击相同。
我有两个图表，两个都是可点击的
如果添加以下内容：
<script type="text/javascript">
var chartC;
draw_main_chart();
function draw_main_chart()
{
Highcharts.setOptions({ colors:['#8BC3E8'] });
var colors = '#8BC3E8',
categories = [ 'Specialteam & Winback', 'Inbound Salg & Service 2', 'SP Nord', 'Inbound Nysalg', 'SP Sjælland', 'Outbound Nysalg', 'Inbound Gruppe & Nordea', 'Inbound Salg & Service 1', 'SP Syd', 'Outbound Mail & Chat', 'Service & Holdback', 'RoS', 'Outbound Mersalg', 'Outbound Nordea', 'Strategisk Salgsstyring', 'Outbound Auto', 'Onboarding', 'Partner', ], name = 'Tryg',
level = 0,
data = [ { y:14.50,color: '#8BC3E8',drilldown:{ id:57, name:'Specialteam & Winback',color: '#8BC3E8' } }, { y:11.24,color: '#8BC3E8',drilldown:{ id:62, name:'Inbound Salg & Service 2',color: '#8BC3E8' } }, { y:8.15,color: '#8BC3E8',drilldown:{ id:56, name:'SP Nord',color: '#8BC3E8' } }, { y:8.03,color: '#8BC3E8',drilldown:{ id:59, name:'Inbound Nysalg',color: '#8BC3E8' } }, { y:7.56,color: '#8BC3E8',drilldown:{ id:54, name:'SP Sjælland',color: '#8BC3E8' } }, { y:6.49,color: '#8BC3E8',drilldown:{ id:63, name:'Outbound Nysalg',color: '#8BC3E8' } }, { y:6.43,color: '#8BC3E8',drilldown:{ id:60, name:'Inbound Gruppe & Nordea',color: '#8BC3E8' } }, { y:6.36,color: '#8BC3E8',drilldown:{ id:61, name:'Inbound Salg & Service 1',color: '#8BC3E8' } }, { y:6.16,color: '#8BC3E8',drilldown:{ id:55, name:'SP Syd',color: '#8BC3E8' } }, { y:6.14,color: '#8BC3E8',drilldown:{ id:67, name:'Outbound Mail & Chat',color: '#8BC3E8' } }, { y:5.58,color: '#8BC3E8',drilldown:{ id:58, name:'Service & Holdback',color: '#8BC3E8' } }, { y:4.28,color: '#8BC3E8',drilldown:{ id:86, name:'RoS',color: '#8BC3E8' } }, { y:3.69,color: '#8BC3E8',drilldown:{ id:64, name:'Outbound Mersalg',color: '#8BC3E8' } }, { y:2.76,color: '#8BC3E8',drilldown:{ id:66, name:'Outbound Nordea',color: '#8BC3E8' } }, { y:1.81,color: '#8BC3E8',drilldown:{ id:68, name:'Strategisk Salgsstyring',color: '#8BC3E8' } }, { y:0.82,color: '#8BC3E8',drilldown:{ id:65, name:'Outbound Auto',color: '#8BC3E8' } }, { y:0,color: '#8BC3E8',drilldown:{ id:88, name:'Onboarding',color: '#8BC3E8' } }, { y:0,color: '#8BC3E8',drilldown:{ id:89, name:'Partner',color: '#8BC3E8' } }, ];
chartC = new Highcharts.Chart({
chart: {
renderTo: 'DepartmentStat',
type: 'column',
events: {
}
},
title: {
text: 'TOTAL STATISTICS OF TRYG',
style: {
fontSize: '15px',
fontWeight: 'bold',
color: '#000000'
},
align: 'center'
},
subtitle: {
text: '<div style="font-size: 14px; color:#000000;">Total amount of clicks department (%)</div><br><br><div style="font-size: 10px; color:#000000;">22-12-2015 to 15-02-2016</div><br><br><div style="font-size: 10px; color:#33c570;">Click each department to view details</div>',
style: {
fontWeight: 'bold'
}
},
xAxis: {
categories: categories,
style: {
fontWeight: 'bold',
fontSize: '11px',
color: '#000000'
}
},
yAxis: {
title: {
text: 'Total percent %',
style: {
fontWeight: 'bold',
fontSize: '11px',
color: '#000000'
}
}
},
credits: {
enabled: false
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function(e)
{
var drilldown = this.drilldown;
if (drilldown)
{
window.location.href = 'userlogs/departments/' + drilldown.id;
}
},
mouseOver: function() {
$(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css('fill', '#33c570');
},
mouseOut: function() {
$(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css('fill', 'black');
}
}
},
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
formatter: function() {
return this.y;
}
}
}
},
tooltip: {
enabled: false
},
series: [{
name: name,
level: level,
data: data,
showInLegend: false
}],
exporting: {
enabled: true
}
});
draw_product_chart();
$.each(chartC.xAxis[0].ticks, function(i, tick) {
$('.highcharts-xaxis-labels text').on('click', function () {
var drilldown = chartC.series[0].data[i].drilldown;
if (drilldown) { // drill down
//window.location.href = 'userlogs/departments/' + drilldown.id;
alert(drilldown.id);
}
});
$('.highcharts-drilldown-axis-label').hover(function () {
$(this).css('fill', '#33c570');
},
function () {
$(this).css('fill', 'black');
});
});
}
var chartP;
function draw_product_chart()
{
Highcharts.setOptions({ colors:['#8BC3E8'] });
var colors = '#8BC3E8',
categories = [ 'Bil', 'Hus', 'Indbo', 'Ulykke', 'Rejse - Verden', 'Hund', 'Børneforsikring', ]; name = 'Tryg',
level = 0,
data = [ { y:55.33,color: '#8BC3E8',drilldown:{ id:23, name:'Bil',color: '#8BC3E8' } }, { y:20.35,color: '#8BC3E8',drilldown:{ id:22, name:'Hus',color: '#8BC3E8' } }, { y:9.90,color: '#8BC3E8',drilldown:{ id:15, name:'Indbo',color: '#8BC3E8' } }, { y:9.23,color: '#8BC3E8',drilldown:{ id:25, name:'Ulykke',color: '#8BC3E8' } }, { y:3.03,color: '#8BC3E8',drilldown:{ id:36, name:'Rejse - Verden',color: '#8BC3E8' } }, { y:1.73,color: '#8BC3E8',drilldown:{ id:24, name:'Hund',color: '#8BC3E8' } }, { y:0.43,color: '#8BC3E8',drilldown:{ id:43, name:'Børneforsikring',color: '#8BC3E8' } }, ];
chartP = new Highcharts.Chart({
chart: {
renderTo: 'ProductStat',
type: 'column',
events: {
}
},
title: {
text: 'TOTAL STATISTICS OF TRYG',
style: {
fontSize: '15px',
fontWeight: 'bold',
color: '#000000'
},
align: 'center'
},
subtitle: {
text: '<div style="font-size: 14px; color:#000000;">Total amount of clicks divided into products (%)</div><br><br> <div style="font-size: 10px; color:#000000;">22-12-2015 to 15-02-2016</div><br><br><div style="font-size: 10px; color:#33c570;">Click each product to view details</div>',
style: {
fontWeight: 'bold'
}
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total percent %',
style: {
fontWeight: 'bold',
fontSize: '11px',
color: '#000000'
}
}
},
credits: {
enabled: false
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function(e)
{
var drilldown = this.drilldown;
if (drilldown)
{
window.location.href = 'userlogs/products/' + drilldown.id;
}
},
mouseOver: function() {
$(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css('fill', '#33c570');
},
mouseOut: function() {
$(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css('fill', 'black');
}
}
},
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
formatter: function() {
return this.y;
}
}
}
},
tooltip: {
enabled: false
},
series: [{
name: name,
level: level,
data: data,
showInLegend: false
}],
exporting: {
enabled: true
}
});
$.each(chartP.xAxis[0].ticks, function(i, tick) {
tick.label.on('click', function() {
var drilldown = chartP.series[0].data[i].drilldown;
if (drilldown) { // drill down
//window.location.href = 'userlogs/products/' + drilldown.id;
alert(drilldown.id);
}
});
$('.highcharts-drilldown-axis-label').hover(function () {
$(this).css('fill', '#33c570');
},
function () {
$(this).css('fill', 'black');
});
});
}
</script>
在图表上，一个图表有效，另一个图表不起作用。
都有var chatC和var chartP
我做错了什么？一张图表另一张图表没有。
如果我同时点击图表，则其中一个图表不起作用。 我知道问题在这里：
$.each(chartC.xAxis[0].ticks, function(i, tick) {
$('.highcharts-xaxis-labels text').on('click', function () {
var drilldown = chartC.series[0].data[i].drilldown;
if (drilldown) { // drill down
//window.location.href = 'userlogs/departments/' + drilldown.id;
alert(drilldown.id);
}
});
$('.highcharts-drilldown-axis-label').hover(function () {
$(this).css('fill', '#33c570');
},
function () {
$(this).css('fill', 'black');
});
});