我正在尝试从高光谱下钻条中获取条形图值，但我只能从最后一个条形图中获取而不是剩余的光标。 示例位于此网址https://jsfiddle.net/pravisivadasan/j8y21axp/
上任何人都可以帮我吗？
$(function () {
var chart;
var protocolNames = ['P1','P2','P3','P4','P5'];
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container_inc',
type: 'column',
events: {
drilldown: function(e) {
parentSeriesIndex = e.point.series.index;
parentSeriesName = e.point.series.name;
chart.setTitle({ text:''});
chart.yAxis[0].setTitle({text:''});
//chart.xAxis[0].setCategories([], true);
chart.yAxis[1].update({
labels: {
enabled: false
},
title: {
text: null
}
});
},
drillup: function(e) {
chart.xAxis[0].setCategories(protocolNames, true);
chart.xAxis[0].update({labels:{rotation:0}});
chart.yAxis[1].update({
labels: {
enabled: true
},
title: {
text: ''
}
});
}
}
},
title: {
text: 'Incident - inflow vs Outflow'
},
credits: {
enabled: false
},
xAxis: [{
title: {
useHTML: true
},
type: "category",
//categories: protocolNames,
labels: {
useHTML: true,
rotation:0
}
}, {
title: {
useHTML: true
},
type: "category",
opposite: true,
//categories: protocolNames,
labels: {
useHTML: true,
rotation:0
}
}],
yAxis: [{
min: 0,
title: {
text: 'Percentage (%)'
}
}, {
title: {
text: ''
},
opposite: true
}],
tooltip: {
//shared: true
},
plotOptions: {
series: {
events:{
click: function (event) {
alert(event.point.name);
console.log(event);
}
}
}
},
series: [{
name: 'Opening Balance',
data: [{
name: 'P1',
y: 2 ,
drilldown: 'P1OBINC_VM'
}, {
name: 'P2',
y: 3,
drilldown: 'P2OBINC_VM'
}, {
name: 'P3',
y: 4,
drilldown: 'P3OBINC_VM'
},
{
name: 'P4',
y: 2,
drilldown: 'P4OBINC_VM'
},
{
name: 'P5',
y: 4,
drilldown: 'P5OBINC_VM'
}],
tooltip: {
valueSuffix: ' %'
}
},
{
name: 'Received',
color: '#000000',
data: [{
name: 'P1',
y: 4,
drilldown: 'P1RecvInc'
}, {
name: 'P2',
y: 5,
drilldown: 'P2RecvInc'
}, {
name: 'P3',
y:2 ,
drilldown: 'P3RecvInc'
},{
name: 'P4',
y:3,
drilldown: 'P4RecvInc'
},{
name: 'P5',
y: 4,
drilldown: 'P5RecvInc'
}],
tooltip: {
valueSuffix: ' %'
},
},{
name: 'Responsed',
color: '#90ED7D',
data: [{
name: 'P1',
y: 2 ,
drilldown: 'P1ResponsedInc'
}, {
name: 'P2',
y: 1,
drilldown: 'P2ResponsedInc'
}, {
name: 'P3',
y: 3,
drilldown: 'P3ResponsedInc'
},{
name: 'P4',
y: 4,
drilldown: 'P4ResponsedInc'
},{
name: 'P5',
y: 5,
drilldown: 'P5ResponsedInc'
}],
tooltip: {
valueSuffix: ' %'
},
},{
name: 'Resolved',
color: '#F7A35C',
data: [{
name: 'P1',
y: 5,
drilldown: 'P1ResolvedInc'
}, {
name: 'P2',
y: 5,
drilldown: 'P2ResolvedInc'
}, {
name: 'P3',
y: 6,
drilldown: 'P3ResolvedInc'
},{
name: 'P4',
y: 6,
drilldown: 'P4ResolvedInc'
},{
name: 'P5',
y: 5,
drilldown: 'P5ResolvedInc'
}],
tooltip: {
valueSuffix: ' %'
},
},{
name: 'Carried Forward',
color: '#0000ff',
data: [{
name: 'P1',
y: 6,
drilldown: 'P1CarriedInc'
}, {
name: 'P2',
y: 2,
drilldown: 'P2CarriedInc'
}, {
name: 'P3',
y: 3,
drilldown: 'P3CarriedInc'
},{
name: 'P4',
y: 4,
drilldown: 'P4CarriedInc'
},{
name: 'P5',
y: 5,
drilldown: 'P5CarriedInc'
}],
tooltip: {
valueSuffix: ' %'
},
},{
name: 'Queued',
color: '#F7A35C',
data: [{
name: 'P1',
y: 12,
drilldown: 'P1QueuedInc'
}, {
name: 'P2',
y:14,
drilldown: 'P2QueuedInc'
}, {
name: 'P3',
y: 15,
drilldown: 'P3QueuedInc'
},{
name: 'P4',
y: 21,
drilldown: 'P4QueuedInc'
},{
name: 'P5',
y: 46,
drilldown: 'P5QueuedInc'
}],
tooltip: {
valueSuffix: ' %'
},
},{
name: 'SLA Hold',
color: '#ffff00',
data: [{
name: 'P1',
y: 3,
drilldown: 'P1SLAInc'
}, {
name: 'P2',
y: 4,
drilldown: 'P2SLAInc'
}, {
name: 'P3',
y: 4,
drilldown: 'P3SLAInc'
},{
name: 'P4',
y: 5,
drilldown: 'P4SLAInc'
},{
name: 'P5',
y: 6,
drilldown: 'P5SLAInc'
}],
tooltip: {
valueSuffix: ' %'
}
}
],
drilldown: {
series: [{
name: 'OB',
id: 'P1OBINC_VM',
dataLabels: {
enabled: true
},
data: [
['OB P1 ',12]
],
Type: 'INC'
},
{
name: 'OB',
id: 'P2OBINC_VM',
dataLabels: {
enabled: true
},
data: [
['OB P2 ',4]
],
Type: 'INC'
},
{
name: 'OB',
id: 'P3OBINC_VM',
dataLabels: {
enabled: true
},
data: [
['OB P3 ',5],
],
Type: 'INC'
},
{
name: 'OB',
id: 'P4OBINC_VM',
dataLabels: {
enabled: true
},
data: [
['OB P4 ',6]
],
Type: 'INC'
},
{
name: 'OB',
id: 'P5OBINC_VM',
dataLabels: {
enabled: true
},
data: [
['OB P5 ',5]
],
Type: 'INC'
},{
name: 'Received',
id: 'P1RecvInc',
dataLabels: {
enabled: true
},
data: [
['Received P1 ',2]
],
Type: 'INC'
},{
name: 'Received',
id: 'P2RecvInc',
dataLabels: {
enabled: true
},
data: [
['Received P2 ',3]
],
Type: 'INC'
},{
name: 'Received',
id: 'P3RecvInc',
dataLabels: {
enabled: true
},
data: [
['Received P3 ',3]
],
Type: 'INC'
},{
name: 'Received',
id: 'P4RecvInc',
dataLabels: {
enabled: true
},
data: [
['Received P4 ',2]
],
Type: 'INC'
},{
name: 'Received',
id: 'P5RecvInc',
dataLabels: {
enabled: true
},
data: [
['Received P5 ',5]
],
Type: 'INC'
}, {
name: 'Responsed',
id: 'P1ResponsedInc',
dataLabels: {
enabled: true
},
data: [
['Responsed P1 ',6]
],
Type: 'INC'
},{
name: 'Responsed',
id: 'P2ResponsedInc',
dataLabels: {
enabled: true
},
data: [
['Responsed P2 ',7]
],
Type: 'INC'
},{
name: 'Responsed',
id: 'P3ResponsedInc',
dataLabels: {
enabled: true
},
data: [
['Responsed P3 ',3]
],
Type: 'INC'
},{
name: 'Responsed',
id: 'P4ResponsedInc',
dataLabels: {
enabled: true
},
data: [
['Responsed P4 ',6]
],
Type: 'INC'
},{
name: 'Responsed',
id: 'P5ResponsedInc',
dataLabels: {
enabled: true
},
data: [
['Responsed P5 ',7]
],
Type: 'INC'
},
{
name: 'Resolved',
id: 'P1ResolvedInc',
dataLabels: {
enabled: true
},
data: [
['Resolved P1 ',6]
],
Type: 'INC'
},
{
name: 'Resolved',
id: 'P2ResolvedInc',
dataLabels: {
enabled: true
},
data: [
['Resolved P2 ',7]
],
Type: 'INC'
},
{
name: 'Resolved',
id: 'P3ResolvedInc',
dataLabels: {
enabled: true
},
data: [
['Resolved P3 ',6]
],
Type: 'INC'
},
{
name: 'Resolved',
id: 'P4ResolvedInc',
dataLabels: {
enabled: true
},
data: [
['Resolved P4 ',4]
],
Type: 'INC'
},
{
name: 'Resolved',
id: 'P5ResolvedInc',
dataLabels: {
enabled: true
},
data: [
['Resolved P5 ',5]
],
Type: 'INC'
},
{
name: 'Carried Forward',
id: 'P1CarriedInc',
dataLabels: {
enabled: true
},
data: [
['Carried P1 ',7]
],
Type: 'INC'
},{
name: 'Carried Forward',
id: 'P2CarriedInc',
dataLabels: {
enabled: true
},
data: [
['Carried P2 ',8]
],
Type: 'INC'
},{
name: 'Carried Forward',
id: 'P3CarriedInc',
dataLabels: {
enabled: true
},
data: [
['Carried P3 ',8]
],
Type: 'INC'
},{
name: 'Carried Forward',
id: 'P4CarriedInc',
dataLabels: {
enabled: true
},
data: [
['Carried P4 ',4]
]
},{
name: 'Carried Forward',
id: 'P5CarriedInc',
dataLabels: {
enabled: true
},
data: [
['Carried P5 ',6]
]
}, {
name: 'Queued',
id: 'P1QueuedInc',
dataLabels: {
enabled: true
},
data: [
['Queued P1 ',2]
]
},{
name: 'Queued',
id: 'P2QueuedInc',
dataLabels: {
enabled: true
},
data: [
['Queued P2 ',3]
]
},{
name: 'Queued',
id: 'P3QueuedInc',
dataLabels: {
enabled: true
},
data: [
['Queued P3 ',4]
]
},{
name: 'Queued',
id: 'P4QueuedInc',
dataLabels: {
enabled: true
},
data: [
['Queued P4 ',5]
]
},{
name: 'Queued',
id: 'P5QueuedInc',
dataLabels: {
enabled: true
},
data: [
['Queued P5 ',6]
]
},{
name: 'SLA Hold',
id: 'P1SLAInc',
dataLabels: {
enabled: true
},
data: [
['SLA Hold P1 ',7]
]
},{
name: 'SLA Hold',
id: 'P2SLAInc',
dataLabels: {
enabled: true
},
data: [
['SLA Hold P2 ',5]
]
},{
name: 'SLA Hold',
id: 'P3SLAInc',
dataLabels: {
enabled: true
},
data: [
['SLA Hold P3 ',4]
]
},{
name: 'SLA Hold',
id: 'P4SLAInc',
dataLabels: {
enabled: true
},
data: [
['SLA Hold P4 ',3]
]
},{
name: 'SLA Hold',
id: 'P5SLAInc',
dataLabels: {
enabled: true
},
data: [
['SLA Hold P5 ',7]
]
}]
}
});
});
});