How to make combination in drilldown in highcharts / add outliers in boxplot in drilldown?

问题

I asked one question recently, but this is a new, relevant yet total different one. I would like to add outliers in boxplot which is in drilldown. I am able to do that in primary plot, in a combination way that boxplot is in one series while outliers are in another series as 'scatter'. As in follows:

series : [ {type : 'boxplot' , ...} , {type : 'scatter' ,...} ]

But as now my boxplot is in drilldown, whose series denotes different drilldowns/figures, I can not add outliers in boxplot. As in follows:

drilldown : { series : [ {type : 'boxplot' , name : 's1' , id : 's1' , ...} , {type : 'scatter' , name : 's1' , id : 's1' , ...} ] }

It would be useless have them use the same id and name, for latter one would cover the formal one. Hence, my current boxplot's drilldown boxplot have no outliers. As show below.

Highcharts.setOptions({
     colors: ['#33FFFF', '#3399FF' , '#3333FF' , '#9933FF' , '#FF33FF' , '#FF3399' , '#FF3333' , '#FF9933' , '#FFFF33' , '#99FF33' , '#33FF33' , '#00F57A' , '#00B85C' ]
    });

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'boxplot'
        },
        title: {
            text: ''
        },
        legend: {
            enabled: false
        },
        xAxis: {
            type: 'category',

            title: {
                text: ''
            }
        },
        yAxis: {
            title: {
                text: 'RPKM'
            }
        },
        plotOptions : {
            boxplot : {
                medianColor: '#FFFFFF',
                medianWidth: 1.2
            }
        },
        series: [
{data: [                    
                   {
x : 0,
low : 137.454800 ,
q1 : 193.180600 ,
median : 239.781500 ,
q3 : 268.534200 ,
high : 307.995100 ,
pointWidth : 24,fillColor: Highcharts.getOptions().colors[0],color: Highcharts.getOptions().colors[0],name:'Early prenatal A'
,drilldown:'a0'
}

,
{
x : 1,
low : 92.917810 ,
q1 : 136.239360 ,
median : 155.951450 ,
q3 : 169.681420 ,
high : 215.367540 ,
pointWidth : 24,fillColor: Highcharts.getOptions().colors[1],color: Highcharts.getOptions().colors[1],name:'Early prenatal B'
,drilldown:'a1'
}

,
{
x : 2,
low : 129.687600 ,
q1 : 155.824800 ,
median : 177.170200 ,
q3 : 209.450400 ,
high : 284.302400 ,
pointWidth : 24,fillColor: Highcharts.getOptions().colors[2],color: Highcharts.getOptions().colors[2],name:'Early mid-prenatal A'
,drilldown:'a2'
}

,
{
x : 3,
low : 55.805900 ,
q1 : 117.463500 ,
median : 139.745800 ,
q3 : 170.863200 ,
high : 230.989900 ,
pointWidth : 24,fillColor: Highcharts.getOptions().colors[3],color: Highcharts.getOptions().colors[3],name:'Early mid-prenatal B'
,drilldown:'a3'
}

,
{
x : 4,
low : 65.473830 ,
q1 : 106.122030 ,
median : 122.133410 ,
q3 : 139.876510 ,
high : 179.184210 ,
pointWidth : 24,fillColor: Highcharts.getOptions().colors[4],color: Highcharts.getOptions().colors[4],name:'Late mid-prenatal'
,drilldown:'a4'
}

,
{
x : 5,
low : 29.982680 ,
q1 : 68.503770 ,
median : 89.739910 ,
q3 : 98.614430 ,
high : 138.395890 ,
pointWidth : 24,fillColor: Highcharts.getOptions().colors[5],color: Highcharts.getOptions().colors[5],name:'Late prenatal'
,drilldown:'a5'
}

,
{
x : 6,
low : 19.978470 ,
q1 : 39.705310 ,
median : 51.624160 ,
q3 : 60.536260 ,
high : 83.889140 ,
pointWidth : 24,fillColor: Highcharts.getOptions().colors[6],color: Highcharts.getOptions().colors[6],name:'Early infancy'
,drilldown:'a6'
}

,
{
x : 7,
low : 50.679100 ,
q1 : 55.191780 ,
median : 58.813590 ,
q3 : 61.126990 ,
high : 68.266470 ,
pointWidth : 24,fillColor: Highcharts.getOptions().colors[7],color: Highcharts.getOptions().colors[7],name:'Late infancy'
,drilldown:'a7'
}

,
{
x : 8,
low : 15.138200 ,
q1 : 30.538220 ,
median : 37.540280 ,
q3 : 42.228450 ,
high : 49.069710 ,
pointWidth : 24,fillColor: Highcharts.getOptions().colors[8],color: Highcharts.getOptions().colors[8],name:'Early childhood'
,drilldown:'a8'
}

,
{
x : 9,
low : 18.499100 ,
q1 : 25.500380 ,
median : 30.374310 ,
q3 : 36.269800 ,
high : 51.134470 ,
pointWidth : 24,fillColor: Highcharts.getOptions().colors[9],color: Highcharts.getOptions().colors[9],name:'Late childhood'
,drilldown:'a9'
}

,
{
x : 10,
low : 22.025020 ,
q1 : 29.279230 ,
median : 36.748660 ,
q3 : 46.518430 ,
high : 67.598710 ,
pointWidth : 24,fillColor: Highcharts.getOptions().colors[10],color: Highcharts.getOptions().colors[10],name:'Adolescence'
,drilldown:'a10'
}

,
{
x : 11,
low : 10.235750 ,
q1 : 26.566710 ,
median : 33.398670 ,
q3 : 40.092060 ,
high : 59.317570 ,
pointWidth : 24,fillColor: Highcharts.getOptions().colors[11],color: Highcharts.getOptions().colors[11],name:'Adulthood'
,drilldown:'a11'
}
],
name:'Stage Level',
tooltip: {
//headerFormat: 'Observation:',
footerFormat: '<em>{point.key}</em><br/>'
 }

  }


 ,{tooltip:{pointFormat:'{point.y} in {point.fname}'},name: 'Outlier',color: Highcharts.getOptions().colors[1],type: 'scatter',data: [
 {x: 1 ,y: 239.721302 ,fname:'Early prenatal B'},
 {x: 1 ,y: 55.716973 ,fname:'Early prenatal B'}, 
 {x: 1 ,y: 76.719418 ,fname:'Early prenatal B'}, 
 {x: 1 ,y: 64.015346 ,fname:'Early prenatal B'}, 
 ],marker:{symbol : 'circle'}}
 ,{tooltip:{pointFormat:'{point.y} in {point.fname}'},name: 'Outlier',color: Highcharts.getOptions().colors[4],type: 'scatter',data: [
 {x: 4 ,y: 54.518196 ,fname:'Late mid-prenatal'},
 ],marker:{symbol : 'circle'}}
 ,{tooltip:{pointFormat:'{point.y} in {point.fname}'},name: 'Outlier',color: Highcharts.getOptions().colors[6],type: 'scatter',data: [
 {x: 6 ,y: 116.422878 ,fname:'Early infancy'},
 ],marker:{symbol : 'circle'}}
 ,{tooltip:{pointFormat:'{point.y} in {point.fname}'},name: 'Outlier',color: Highcharts.getOptions().colors[7],type: 'scatter',data: [
 {x: 7 ,y: 87.81937 ,fname:'Late infancy'},
 ],marker:{symbol : 'circle'}}
 ,{tooltip:{pointFormat:'{point.y} in {point.fname}'},name: 'Outlier',color: Highcharts.getOptions().colors[8],type: 'scatter',data: [
 {x: 8 ,y: 79.751904 ,fname:'Early childhood'},
 {x: 8 ,y: 74.559397 ,fname:'Early childhood'},
 {x: 8 ,y: 77.572389 ,fname:'Early childhood'},
 {x: 8 ,y: 71.848965 ,fname:'Early childhood'},
 ],marker:{symbol : 'circle'}}
 ,{tooltip:{pointFormat:'{point.y} in {point.fname}'},name: 'Outlier',color: Highcharts.getOptions().colors[9],type: 'scatter',data: [
 {x: 9 ,y: 102.364761 ,fname:'Late childhood'},
 {x: 9 ,y: 84.559888 ,fname:'Late childhood'}, 
 ],marker:{symbol : 'circle'}}
 ,{tooltip:{pointFormat:'{point.y} in {point.fname}'},name: 'Outlier',color: Highcharts.getOptions().colors[10],type: 'scatter',data: [
 {x: 10 ,y: 74.638885 ,fname:'Adolescence'},
 {x: 10 ,y: 85.489912 ,fname:'Adolescence'},
 ],marker:{symbol : 'circle'}}
 ,{tooltip:{pointFormat:'{point.y} in {point.fname}'},name: 'Outlier',color: Highcharts.getOptions().colors[11],type: 'scatter',data: [
 {x: 11 ,y: 80.671587 ,fname:'Adulthood'},
 {x: 11 ,y: 64.98078 ,fname:'Adulthood'}, 
 {x: 11 ,y: 73.643196 ,fname:'Adulthood'},
 {x: 11 ,y: 63.109206 ,fname:'Adulthood'},
 {x: 11 ,y: 106.44305 ,fname:'Adulthood'},
 {x: 11 ,y: 81.019643 ,fname:'Adulthood'},
 {x: 11 ,y: 72.517182 ,fname:'Adulthood'},
 ],marker:{symbol : 'circle'}}
        ],

        drilldown: {
            series: [

                {
                id: 'aa1',
                type: 'column',
                data: [{
                    y: 39.9,
                    name: 'name1'
                    }, {
                    y: 31.5,
                    name: 'name2'
                      }]
                },
{tooltip:{pointFormat:'{point.y} in {point.fname}'},name : 'Sample Level',id : 'a0' ,color: Highcharts.getOptions().colors[1],type: 'scatter',data: [
 {x: 1 ,y: 239.721302 ,fname:'Early prenatal B'},
 {x: 1 ,y: 55.716973 ,fname:'Early prenatal B'}, 
 {x: 1 ,y: 76.719418 ,fname:'Early prenatal B'}, 
 {x: 1 ,y: 64.015346 ,fname:'Early prenatal B'}, 
 ],marker:{symbol : 'circle'}}
 ,

{
name : 'Sample Level',id : 'a0' ,
type : 'boxplot', 
data: [{x : 0 ,
name : 'H376.IIA.51',fillColor : Highcharts.getOptions().colors[0],low : 177.242900 ,
q1 : 205.072600 ,
median : 242.331500 ,
q3 : 272.279300 ,
high : 307.995100 ,
},{x : 1 ,
name : 'H376.IIA.50',fillColor : Highcharts.getOptions().colors[0],low : 137.454800 ,
q1 : 179.522800 ,
median : 228.641600 ,
q3 : 249.357900 ,
high : 306.817900 ,
}]},{
name : 'Sample Level',id : 'a1' ,
type : 'boxplot', 
data: [{x : 0 ,
name : 'H376.IIB.50',fillColor : Highcharts.getOptions().colors[1],low : 138.932100 ,
q1 : 154.910100 ,
median : 159.421800 ,
q3 : 166.705900 ,
high : 170.136700 ,
},{x : 1 ,
name : 'H376.IIB.51',fillColor : Highcharts.getOptions().colors[1],low : 135.210200 ,
q1 : 147.937900 ,
median : 169.681400 ,
q3 : 178.332200 ,
high : 210.950000 ,
},{x : 2 ,
name : 'H376.IIB.52',fillColor : Highcharts.getOptions().colors[1],low : 92.917810 ,
q1 : 122.379250 ,
median : 136.239360 ,
q3 : 146.694490 ,
high : 161.036110 ,
}]},{
name : 'Sample Level',id : 'a2' ,
type : 'boxplot', 
data: [{x : 0 ,
name : 'H376.IIIA.50',fillColor : Highcharts.getOptions().colors[2],low : 129.934000 ,
q1 : 152.116600 ,
median : 159.479200 ,
q3 : 173.120800 ,
high : 195.116700 ,
},{x : 1 ,
name : 'H376.IIIA.51',fillColor : Highcharts.getOptions().colors[2],low : 173.682800 ,
q1 : 204.015100 ,
median : 220.438400 ,
q3 : 238.150300 ,
high : 284.302400 ,
},{x : 2 ,
name : 'H376.IIIA.52',fillColor : Highcharts.getOptions().colors[2],low : 137.793700 ,
q1 : 143.842300 ,
median : 163.880200 ,
q3 : 187.011900 ,
high : 195.850400 ,
}]},{
name : 'Sample Level',id : 'a3' ,
type : 'boxplot', 
data: [{x : 0 ,
name : 'H376.IIIB.50',fillColor : Highcharts.getOptions().colors[3],low : 131.268200 ,
q1 : 163.241100 ,
median : 179.796100 ,
q3 : 202.282100 ,
high : 230.989900 ,
},{x : 1 ,
name : 'H376.IIIB.51',fillColor : Highcharts.getOptions().colors[3],low : 86.757760 ,
q1 : 117.577890 ,
median : 132.732950 ,
q3 : 152.025730 ,
high : 192.695230 ,
},{x : 2 ,
name : 'H376.IIIB.52',fillColor : Highcharts.getOptions().colors[3],low : 55.805900 ,
q1 : 112.396400 ,
median : 148.136700 ,
q3 : 158.304000 ,
high : 195.066600 ,
},{x : 3 ,
name : 'H376.IIIB.53',fillColor : Highcharts.getOptions().colors[3],low : 58.977680 ,
q1 : 117.296550 ,
median : 128.859540 ,
q3 : 156.513070 ,
high : 199.546430 ,
}]},{
name : 'Sample Level',id : 'a4' ,
type : 'boxplot', 
data: [{x : 0 ,
name : 'H376.IV.53',fillColor : Highcharts.getOptions().colors[4],low : 54.518200 ,
q1 : 111.829900 ,
median : 126.955700 ,
q3 : 167.103600 ,
high : 173.332000 ,
},{x : 1 ,
name : 'H376.IV.51',fillColor : Highcharts.getOptions().colors[4],low : 74.338170 ,
q1 : 74.338170 ,
median : 92.579780 ,
q3 : 110.821400 ,
high : 110.821400 ,
},{x : 2 ,
name : 'H376.IV.54',fillColor : Highcharts.getOptions().colors[4],low : 94.188410 ,
q1 : 99.934560 ,
median : 112.693950 ,
q3 : 128.572250 ,
high : 141.715820 ,
},{x : 3 ,
name : 'H376.IV.50',fillColor : Highcharts.getOptions().colors[4],low : 100.237200 ,
q1 : 112.766500 ,
median : 125.433800 ,
q3 : 143.164500 ,
high : 179.184200 ,
}]},{
name : 'Sample Level',id : 'a5' ,
type : 'boxplot', 
data: [{x : 0 ,
name : 'H376.V.51',fillColor : Highcharts.getOptions().colors[5],low : 35.449400 ,
q1 : 35.449400 ,
median : 35.449400 ,
q3 : 35.449400 ,
high : 35.449400 ,
},{x : 1 ,
name : 'H376.V.52',fillColor : Highcharts.getOptions().colors[5],low : 29.982680 ,
q1 : 34.286990 ,
median : 38.591290 ,
q3 : 88.493590 ,
high : 138.395890 ,
},{x : 2 ,
name : 'H376.V.50',fillColor : Highcharts.getOptions().colors[5],low : 70.415210 ,
q1 : 70.415210 ,
median : 77.113640 ,
q3 : 83.812070 ,
high : 83.812070 ,
},{x : 3 ,
name : 'H376.V.53',fillColor : Highcharts.getOptions().colors[5],low : 88.297040 ,
q1 : 88.847730 ,
median : 90.742780 ,
q3 : 101.693510 ,
high : 114.335300 ,
}]},{
name : 'Sample Level',id : 'a6' ,
type : 'boxplot', 
data: [{x : 0 ,
name : 'H376.VI.50',fillColor : Highcharts.getOptions().colors[6],low : 19.978470 ,
q1 : 33.245010 ,
median : 43.544760 ,
q3 : 48.099960 ,
high : 51.624160 ,
},{x : 1 ,
name : 'H376.VI.51',fillColor : Highcharts.getOptions().colors[6],low : 31.642100 ,
q1 : 32.164610 ,
median : 37.132430 ,
q3 : 48.085840 ,
high : 52.346930 ,
},{x : 2 ,
name : 'H376.VI.52',fillColor : Highcharts.getOptions().colors[6],low : 44.871530 ,
q1 : 54.775770 ,
median : 59.502240 ,
q3 : 61.644640 ,
high : 66.245100 ,
}]},{
name : 'Sample Level',id : 'a7' ,
type : 'boxplot', 
data: [{x : 0 ,
name : 'H376.VII.51',fillColor : Highcharts.getOptions().colors[7],low : 50.679100 ,
q1 : 55.191780 ,
median : 58.813590 ,
q3 : 61.126990 ,
high : 68.266470 ,
}]},{
name : 'Sample Level',id : 'a8' ,
type : 'boxplot', 
data: [{x : 0 ,
name : 'H376.VIII.51',fillColor : Highcharts.getOptions().colors[8],low : 31.582050 ,
q1 : 36.516740 ,
median : 38.112800 ,
q3 : 41.753050 ,
high : 45.391350 ,
},{x : 1 ,
name : 'H376.VIII.53',fillColor : Highcharts.getOptions().colors[8],low : 15.138200 ,
q1 : 20.485630 ,
median : 24.514430 ,
q3 : 31.944020 ,
high : 38.402530 ,
},{x : 2 ,
name : 'H376.VIII.52',fillColor : Highcharts.getOptions().colors[8],low : 31.254650 ,
q1 : 36.158770 ,
median : 43.080540 ,
q3 : 48.647270 ,
high : 49.069710 ,
},{x : 3 ,
name : 'H376.VIII.54',fillColor : Highcharts.getOptions().colors[8],low : 29.982540 ,
q1 : 37.724630 ,
median : 38.905040 ,
q3 : 43.192630 ,
high : 47.503550 ,
},{x : 4 ,
name : 'H376.VIII.50',fillColor : Highcharts.getOptions().colors[8],low : 18.364200 ,
q1 : 21.713240 ,
median : 28.317500 ,
q3 : 29.632050 ,
high : 30.181980 ,
}]},{
name : 'Sample Level',id : 'a9' ,
type : 'boxplot', 
data: [{x : 0 ,
name : 'H376.IX.51',fillColor : Highcharts.getOptions().colors[9],low : 18.499100 ,
q1 : 25.018110 ,
median : 27.265820 ,
q3 : 30.193080 ,
high : 34.018780 ,
},{x : 1 ,
name : 'H376.IX.52',fillColor : Highcharts.getOptions().colors[9],low : 20.737510 ,
q1 : 29.404290 ,
median : 38.818180 ,
q3 : 42.059360 ,
high : 47.378440 ,
},{x : 2 ,
name : 'H376.IX.50',fillColor : Highcharts.getOptions().colors[9],low : 21.901050 ,
q1 : 27.844320 ,
median : 31.723080 ,
q3 : 36.269800 ,
high : 40.125680 ,
}]},{
name : 'Sample Level',id : 'a10' ,
type : 'boxplot', 
data: [{x : 0 ,
name : 'H376.X.51',fillColor : Highcharts.getOptions().colors[10],low : 29.636940 ,
q1 : 33.700180 ,
median : 38.866100 ,
q3 : 43.252390 ,
high : 47.351450 ,
},{x : 1 ,
name : 'H376.X.50',fillColor : Highcharts.getOptions().colors[10],low : 22.025020 ,
q1 : 23.293910 ,
median : 26.732280 ,
q3 : 27.945590 ,
high : 27.945590 ,
},{x : 2 ,
name : 'H376.X.53',fillColor : Highcharts.getOptions().colors[10],low : 23.584460 ,
q1 : 26.252890 ,
median : 29.070250 ,
q3 : 34.041760 ,
high : 36.966480 ,
},{x : 3 ,
name : 'H376.X.52',fillColor : Highcharts.getOptions().colors[10],low : 28.171270 ,
q1 : 35.589200 ,
median : 46.177590 ,
q3 : 54.882440 ,
high : 62.534710 ,
}]},{
name : 'Sample Level',id : 'a11' ,
type : 'boxplot', 
data: [{x : 0 ,
name : 'H376.XI.60',fillColor : Highcharts.getOptions().colors[11],low : 31.872340 ,
q1 : 34.590770 ,
median : 35.915730 ,
q3 : 40.943930 ,
high : 45.183150 ,
},{x : 1 ,
name : 'H376.XI.50',fillColor : Highcharts.getOptions().colors[11],low : 29.211650 ,
q1 : 32.551010 ,
median : 34.862020 ,
q3 : 38.254160 ,
high : 38.599670 ,
},{x : 2 ,
name : 'H376.XI.52',fillColor : Highcharts.getOptions().colors[11],low : 37.282150 ,
q1 : 49.405780 ,
median : 53.948130 ,
q3 : 61.213390 ,
high : 73.643200 ,
},{x : 3 ,
name : 'H376.XI.53',fillColor : Highcharts.getOptions().colors[11],low : 21.557980 ,
q1 : 22.566930 ,
median : 28.112760 ,
q3 : 32.631470 ,
high : 37.610770 ,
},{x : 4 ,
name : 'H376.XI.54',fillColor : Highcharts.getOptions().colors[11],low : 10.235750 ,
q1 : 23.119470 ,
median : 27.280010 ,
q3 : 33.253340 ,
high : 47.279650 ,
},{x : 5 ,
name : 'H376.XI.56',fillColor : Highcharts.getOptions().colors[11],low : 15.264730 ,
q1 : 22.514070 ,
median : 26.566710 ,
q3 : 29.137690 ,
high : 33.186450 ,
}]},
            ]
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>

<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 710px; height: 400px; margin: 0 auto"></div>

Any one knows how to add outliers to the drilldown boxplot(the one after you click any of these appears first)?

来源：https://stackoverflow.com/questions/29162967/how-to-make-combination-in-drilldown-in-highcharts-add-outliers-in-boxplot-in

标签

javascript

Highcharts

combinations

boxplot

drilldown