使用Highcharts完成图表。它是堆叠钻取柱类型。其目的是显示超过12个月或30天，正/负条目的数量。
当有人悬停列的一列或一部分时，另一列的另一部分正在突出显示。试图调试它，但没有接近问题的来源，给你一些更多的迹象。
非常感谢任何有关在哪里寻找或如何解决此问题的帮助。 请在下面找到jsfiddle和问题的SS。 如果还有其他我能提供的，请告诉我。
提前致谢。
var valuesArrayMonth = [{
name: 'HELPFUL',
color: '#34b9c7',
data: [{
name: 'JAN',
y: 5,
drilldown: 'JAN'
}, {
name: 'FEB',
y: 2,
drilldown: 'FEB'
}, {
name: 'MAR',
y: 4,
drilldown: 'MAR'
}, {
name: 'APR',
y: 9,
drilldown: 'APR'
}, {
name: 'MAY',
y: 25,
drilldown: 'MAY'
}, {
name: 'JUN',
y: 34,
drilldown: 'JUN'
}, {
name: 'JUL',
y: 72,
drilldown: 'JUL'
}, {
name: 'AUG',
y: 22,
drilldown: 'AUG'
}, {
name: 'SEP',
y: 34,
drilldown: 'SEP'
}, {
name: 'OCT',
y: 54,
drilldown: 'OCT'
}, {
name: 'NOV',
y: 31,
drilldown: 'NOV'
}, {
name: 'DEC',
y: 27,
drilldown: 'DEC'
}]
}, {
name: 'NOT HELPFUL',
color: '#ae0700',
data: [{
name: 'JAN',
y: 2,
drilldown: 'JAN2'
}, {
name: 'FEB',
y: 2,
drilldown: 'FEB2'
}, {
name: 'MAR',
y: 1,
drilldown: 'MAR2'
}, {
name: 'APR',
y: 1,
drilldown: 'APR2'
}, {
name: 'MAY',
y: 5,
drilldown: 'MAY2'
}, {
name: 'JUN',
y: 4,
drilldown: 'JUN2'
}, {
name: 'JUL',
y: 2,
drilldown: 'JUL2'
}, {
name: 'AUG',
y: 2,
drilldown: 'AUG2'
}, {
name: 'SEP',
y: 4,
drilldown: 'SEP2'
}, {
name: 'OCT',
y: 4,
drilldown: 'OCT2'
}, {
name: 'NOV',
y: 1,
drilldown: 'NOV2'
}, {
name: 'DEC',
y: 7,
drilldown: 'DEC2'
}]
}];
var valuesArrayDays = [{
id: 'JAN',
name: 'JAN',
data: [
['1', 4],
['2', 2],
['3', 1],
['4', 2],
['5', 1]
]
},{
id: 'JAN2',
name: 'JAN',
data: [
['1', 3],
['2', 5],
['3', 6],
['4', 2],
['5', 2]
]
},{
id: 'MAR',
name: 'MAR',
data: [
['1', 3],
['2', 5],
['3', 6],
['4', 2],
['5', 2]
]
},{
id: 'MAR2',
name: 'MAR',
data: [
['1', 3],
['2', 5],
['3', 6],
['4', 2],
['5', 2]
]
}];
$(function() {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column',
backgroundColor: null,
zoomType: 'xy',
spacingLeft: 70,
style: {
fontFamily: 'BigNoodleThing'
}
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'category',
crosshair:{
color: '#fdd54c'
},
labels: {
style: {
color: 'black'
}
}
},
yAxis: {
title: {
text: ''
},
opposite:true,
gridLineColor: "rgba(255, 255, 255, 1)",
},
credits:{
enabled:false
},
legend:{
enabled:false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: false,
format: '{point.y:.1f}%'
},
states: {
hover: {
enabled: true,
color: '#343434'
}
}
},
column: {
stacking: 'percent'
}
},
tooltip: {
shared: true,
color: '#ffffff',
backgroundColor: '#ffffff',
borderColor: '#ffffff',
borderRadius:0,
shadow:false,
borderWidth:0,
style: {
padding: 12,
fontSize: '14px',
},
shape:'square',
useHTML: true,
},
series: valuesArrayMonth,
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
color: '#343434',
fontSize: '16px',
fontWeight: 'normal'
},
series: valuesArrayDays
}
})
});
