How to make highcharts boxplot with drilldown?

问题

I am new with highcharts and javascript.

I am trying to make a boxplot with drilldown. Chart type 'boxplot' requires data to be a array of 5 element(min 1st-quatile median 3st-quatile max), as follows:

data: [
            [760, 801, 848, 895, 965],
            [733, 853, 939, 980, 1080],
            [834, 836, 864, 882, 910]
        ]

While drilldown requires that data should have many members, including "drilldown" member, as follow:

data: [{
            name: 'namey',
            y: 49.9,
            drilldown: 'tokyo 1'
        }, {
            y: 71.5,
            name: 'namex',
            drilldown: 'tokyo 2'
        }]

I have tried many ways to make them together, yet nothing works. The following is an example I tried by combining other people's drilldown and boxplot.

$(function () {
$('#container').highcharts({
    chart: {
        type: 'boxplot'
    },
    title: {
        text: ''
    },
    legend: {
        enabled: false
    },
    xAxis: {
        categories: ['Actuaries111', 'Computer and Information Research Scientists', 'Computer and Mathematical Occupations'],
        title: {
            text: ''
        }
    },
    yAxis: {
        title: {
            text: 'Wage'
        }
    },
    series: [{
        id : 'a1',
        name: 'Computer and Information Research Scientists',
        data: [
            [1,68834.77, 85124.14, 107734.77, 131196.33, 157504.48]
        ],
        tooltip: {
            headerFormat: '<em>{point.key}</em><br/>'
        },
        drilldown: 'a'
    }, {
        name: 'Computer and Mathematical Occupations',
        data: [
            [2,46943.39, 64711.77, 90199.38, 117247.03, 144365.60]
        ],
        tooltip: {
            headerFormat: '<em>{point.key}</em><br/>'
        }
    }],
    drilldown: {
        series: [{
            id: 'a',
            type: 'column',
            data: [{
                y: 39.9,
                name: 'name1'
            }, {
                y: 31.5,
                name: 'name2'
            }]

        }]
    }
});

});

How can I add drilldown to boxplot? thanks!

The method the correct answer adopted is not ideal. For the boxplot are not in the correct x position as expected. this may not be a problem in his example because his boxplot is narrow. But it is extremly harmful when I added outliers. They do not match.

sorry I have no reputation for posting images and more than 2 links. i.stack.imgur.com/ YTXbY.png

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 ,
name:'Early prenatal A'
}],
name:'Early prenatal A',
tooltip: {
headerFormat: 'Observation:'}
,pointWidth : 24
,fillColor: Highcharts.getOptions().colors[0]
,color: Highcharts.getOptions().colors[0]
}

,
{
data: [
{
x : 1,
low : 92.917810 ,
q1 : 136.239360 ,
median : 155.951450 ,
q3 : 169.681420 ,
high : 215.367540 ,
name:'Early prenatal B'
}],
name:'Early prenatal B',
tooltip: {
headerFormat: 'Observation:'}
,pointWidth : 24
,fillColor: Highcharts.getOptions().colors[1]
,color: Highcharts.getOptions().colors[1]
}
 ,{name: 'Outlier',color: Highcharts.getOptions().colors[1],type: 'scatter',data: [
 {x: 1 ,y: 239.721302 }, {x: 1 ,y: 239.721302 },
 {x: 1 ,y: 55.716973 },  {x: 1 ,y: 55.716973 }, 
 {x: 1 ,y: 76.719418 },  {x: 1 ,y: 76.719418 }, 
 {x: 1 ,y: 64.015346 },  {x: 1 ,y: 64.015346 }, 
 ]}

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

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

,
{
data: [
{
x : 4,
low : 54.518200 ,
q1 : 105.263300 ,
median : 122.133400 ,
q3 : 141.446800 ,
high : 179.184200 ,
name:'Late mid-prenatal'
}],
name:'Late mid-prenatal',
tooltip: {
headerFormat: 'Observation:'}
,pointWidth : 24
,fillColor: Highcharts.getOptions().colors[4]
,color: Highcharts.getOptions().colors[4]
}

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

,
{
data: [
{
x : 6,
low : 19.978470 ,
q1 : 39.705310 ,
median : 51.624160 ,
q3 : 60.536260 ,
high : 83.889140 ,
name:'Early infancy'
}],
name:'Early infancy',
tooltip: {
headerFormat: 'Observation:'}
,pointWidth : 24
,fillColor: Highcharts.getOptions().colors[6]
,color: Highcharts.getOptions().colors[6]
}
 ,{name: 'Outlier',color: Highcharts.getOptions().colors[6],type: 'scatter',data: [
 {x: 6 ,y: 116.422878 }, {x: 6 ,y: 116.422878 },
 ]}

,
{
data: [
{
x : 7,
low : 50.679100 ,
q1 : 55.191780 ,
median : 58.813590 ,
q3 : 61.126990 ,
high : 68.266470 ,
name:'Late infancy'
}],
name:'Late infancy',
tooltip: {
headerFormat: 'Observation:'}
,pointWidth : 24
,fillColor: Highcharts.getOptions().colors[7]
,color: Highcharts.getOptions().colors[7]
}
 ,{name: 'Outlier',color: Highcharts.getOptions().colors[7],type: 'scatter',data: [
 {x: 7 ,y: 87.81937 }, {x: 7 ,y: 87.81937 },
 ]}

,
{
data: [
{
x : 8,
low : 15.138200 ,
q1 : 30.538220 ,
median : 37.540280 ,
q3 : 42.228450 ,
high : 49.069710 ,
name:'Early childhood'
}],
name:'Early childhood',
tooltip: {
headerFormat: 'Observation:'}
,pointWidth : 24
,fillColor: Highcharts.getOptions().colors[8]
,color: Highcharts.getOptions().colors[8]
}
 ,{name: 'Outlier',color: Highcharts.getOptions().colors[8],type: 'scatter',data: [
 {x: 8 ,y: 79.751904 }, {x: 8 ,y: 79.751904 }, {x: 8 ,y: 74.559397 },
 {x: 8 ,y: 74.559397 }, {x: 8 ,y: 77.572389 }, {x: 8 ,y: 77.572389 },
 {x: 8 ,y: 71.848965 }, {x: 8 ,y: 71.848965 },
 ]}

,
{
data: [
{
x : 9,
low : 18.499100 ,
q1 : 25.500380 ,
median : 30.374310 ,
q3 : 36.269800 ,
high : 51.134470 ,
name:'Late childhood'
}],
name:'Late childhood',
tooltip: {
headerFormat: 'Observation:'}
,pointWidth : 24
,fillColor: Highcharts.getOptions().colors[9]
,color: Highcharts.getOptions().colors[9]
}
 ,{name: 'Outlier',color: Highcharts.getOptions().colors[9],type: 'scatter',data: [
 {x: 9 ,y: 102.364761 }, {x: 9 ,y: 102.364761 },
 {x: 9 ,y: 84.559888 },  {x: 9 ,y: 84.559888 }, 
 ]}

,
{
data: [
{
x : 10,
low : 22.025020 ,
q1 : 29.279230 ,
median : 36.748660 ,
q3 : 46.518430 ,
high : 67.598710 ,
name:'Adolescence'
}],
name:'Adolescence',
tooltip: {
headerFormat: 'Observation:'}
,pointWidth : 24
,fillColor: Highcharts.getOptions().colors[10]
,color: Highcharts.getOptions().colors[10]
}
 ,{name: 'Outlier',color: Highcharts.getOptions().colors[10],type: 'scatter',data: [
 {x: 10 ,y: 74.638885 }, {x: 10 ,y: 74.638885 },
 {x: 10 ,y: 85.489912 }, {x: 10 ,y: 85.489912 },
 ]}

,
{
data: [
{
x : 11,
low : 10.235750 ,
q1 : 26.566710 ,
median : 33.398670 ,
q3 : 40.092060 ,
high : 59.317570 ,
name:'Adulthood'
}],
name:'Adulthood',
tooltip: {
headerFormat: 'Observation:'}
,pointWidth : 24
,fillColor: Highcharts.getOptions().colors[11]
,color: Highcharts.getOptions().colors[11]
}
 ,{name: 'Outlier',color: Highcharts.getOptions().colors[11],type: 'scatter',data: [
  {x: 11 ,y: 80.671587 }, {x: 11 ,y: 80.671587 },
  {x: 11 ,y: 64.98078 },  {x: 11 ,y: 64.98078 }, 
  {x: 11 ,y: 73.643196 }, {x: 11 ,y: 73.643196 },
  {x: 11 ,y: 63.109206 }, {x: 11 ,y: 63.109206 },
  {x: 11 ,y: 106.44305 }, {x: 11 ,y: 106.44305 },
 {x: 11 ,y: 81.019643 }, {x: 11 ,y: 81.019643 },
 {x: 11 ,y: 72.517182 }, {x: 11 ,y: 72.517182 },
 ]}

,

        ],

        drilldown: {
            series: [{
                id: 'a',
                type: 'column',
                data: [{
                    y: 39.9,
                    name: 'name1'
                }, {
                    y: 31.5,
                    name: 'name2'
                }]

            }]
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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/exporting.js"></script>

<div id="container" style="height: 400px; margin: auto; min-width: 400px; max-width: 600px"></div>

So I changed strucure of data. And I manage to make it in the right position. But now its tooltip's point color does not fit any more.

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

$(function () {
    $('#container2').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'
}

,
{
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'
}

,
{
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'
}

,
{
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'
}

,
{
x : 4,
low : 54.518200 ,
q1 : 105.263300 ,
median : 122.133400 ,
q3 : 141.446800 ,
high : 179.184200 ,
pointWidth : 24,fillColor: Highcharts.getOptions().colors[4],color: Highcharts.getOptions().colors[4],name:'Late mid-prenatal'
}

,
{
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'
}

,
{
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'
}

,
{
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'
}

,
{
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'
}

,
{
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'
}

,
{
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'
}

,
{
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'
}

,
],
name:'value',
tooltip: {
headerFormat: 'Observation:',
footerFormat: '<em>{point.key}</em><br/>'
 }

  }
        ],

        drilldown: {
            series: [{
                id: 'a',
                type: 'column',
                data: [{
                    y: 39.9,
                    name: 'name1'
                }, {
                    y: 31.5,
                    name: 'name2'
                }]

            }]
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/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/exporting.js"></script>

<div id="container2" style="height: 400px; margin: auto; min-width: 400px; max-width: 600px"></div>

Any suggestion? To right position and correct tooltip point color?

回答1:

Boxplot point can be created as array (your example) or as an object:

{
    x: 1,
    low: 15,
    q1: 17,  
    median: 18,
    q3: 19,
    high: 20
}

Now, you can add drilldown per point (as required from plugin):

{
    x: 1,
    low: 15,
    q1: 17,  
    median: 18,
    q3: 19,
    high: 20,
    drilldown: 'a'
}

And demo: http://jsfiddle.net/LrLLU/43/

来源：https://stackoverflow.com/questions/28959612/how-to-make-highcharts-boxplot-with-drilldown

标签

javascript

Highcharts

boxplot

drilldown