问题
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