我正在尝试获取每个点的y数据并更改向下钻取列的颜色。这个小提琴从两个系列中获取数据。我怎么做到的？请考虑下面的代码段。
$(function() {
Highcharts.Tick.prototype.drillable = function () {};
$('#columnChart').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
type: 'category'
},
yAxis: {
labels: {
enabled: false
},
title: {
text: null
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: false,
format: '{point.y:.1f}%'
},
events:{
click: function (event) {
alert(event.point.y)
}
}
}
},
tooltip: {
backgroundColor: '#fff',
borderWidth: 1,
borderRadius: 10,
borderColor: '#AAA',
headerFormat: null,
pointFormat: '<span style="color:{point.color}">{point.name}</span><br/>Total clicks: <b>{point.y:.0f}</b>'
},
series: [{
name: 'URLs',
colorByPoint: true,
data: [{
name: 'Game of Thrones',
y: 56.33,
drilldown: 'Game of Thrones'
}, {
name: 'SHERLOCK',
y: 24.03,
drilldown: 'SHERLOCK'
}, {
name: 'Flash',
y: 10.38,
drilldown: 'Flash'
}, {
name: 'Daredevil',
y: 4.77,
drilldown: 'Daredevil'
}, {
name: 'The Fosters',
y: 0.91,
drilldown: 'The Fosters'
}]
}],
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic',
color: '#54BDDC'
},
activeDataLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic',
color: '#fff'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
color: '#fff',
stroke: '#039',
fill: '#2AABD2'
},
select: {
color: '#fff',
stroke: '#039',
fill: '#bada55'
}
}
}
},
series: [{
name: 'Game of Thrones',
id: 'Game of Thrones',
data: [
[
'Sep 9, 2016',
24.13
],
[
'Sep 15, 2016',
17.2
],
[
'Sep 21, 2016',
8.11
],
[
'Sep 29, 2016',
5.33
],
[
'Oct 03, 2016',
1.06
],
[
'Oct 06, 2016',
0.5
]
]
}, {
name: 'SHERLOCK',
id: 'SHERLOCK',
data: [
[
'v40.0',
5
],
[
'v41.0',
4.32
],
[
'v42.0',
3.68
],
[
'v39.0',
2.96
],
[
'v36.0',
2.53
],
[
'v43.0',
1.45
],
[
'v31.0',
1.24
],
[
'v35.0',
0.85
],
[
'v38.0',
0.6
],
[
'v32.0',
0.55
],
[
'v37.0',
0.38
],
[
'v33.0',
0.19
],
[
'v34.0',
0.14
],
[
'v30.0',
0.14
]
]
}, {
name: 'Flash',
id: 'Flash',
data: [
[
'v35',
2.76
],
[
'v36',
2.32
],
[
'v37',
2.31
],
[
'v34',
1.27
],
[
'v38',
1.02
],
[
'v31',
0.33
],
[
'v33',
0.22
],
[
'v32',
0.15
]
]
}, {
name: 'Daredevil',
id: 'Daredevil',
data: [
[
'v8.0',
2.56
],
[
'v7.1',
0.77
],
[
'v5.1',
0.42
],
[
'v5.0',
0.3
],
[
'v6.1',
0.29
],
[
'v7.0',
0.26
],
[
'v6.2',
0.17
]
]
}, {
name: 'The Fosters',
id: 'The Fosters',
data: [
[
'v12.x',
0.34
],
[
'v28',
0.24
],
[
'v27',
0.17
],
[
'v29',
0.16
]
]
}]
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="columnChart"></div>