如何使深入的boxplot与钻取？ [英] How to make highcharts boxplot with drilldown?
本文介绍了如何使深入的boxplot与钻取？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是新来的highcharts和javascript。
我正在尝试使用向下钻取做出箱形图。图表类型'boxplot'需要数据为5元素的数组（如下所示）：b
$ b
<$ c数据：[
[760,801,848,895,965]，
[733,853,939,980,1080]，
[834,836,864,882 ，910]
]
虽然深入分析要求数据应该包含许多成员， 成员，如下所示：
data：[{
name：'namey'，
y：49.9 ，
drilldown：'tokyo 1'
}，{
y：71.5，
name：'namex'，
drilldown：'tokyo 2'
} ]
我尝试了很多方法让它们在一起，但没有任何效果。以下是我通过将其他人的深入信息和
$（函数（）函数） {
$（'＃container'）。highcharts（{
图：{
type：'boxplot'
}，
title：{
text ：''
}，
图例：{
启用：false
}，
xAxis：{
categories：['Actuaries111'，'Computer and信息研究科学家'，'计算机和数学职业']，
标题：{
text：''
}
}，
y轴线：{
title：{
text：'工资'
}
}，
系列：[{
id：'a1'，
name：'Computer and信息研究科学家，
数据：[
[1,68834.77,85124.14,107734.77,131 196.33,157504.48]
]，
tooltip：{
headerFormat：'< em> {point.key}< / em>< br />'
} ，
钻取：'a'
}，{
名称：'计算机和数学职业'，
数据：[
[2,46943.39,64711.77,90199.38， 117247.03，144365.60]
]，
tooltip：{
headerFormat：'< em> {point.key}< / em>< br />'
}
}]，
钻取：{
series：[{
id：'a'，
type：'column'，
data：[{
y：39.9，
name：'name1'
}，{
y：31.5，
name：'name2'
}]
}]
}
}）;
}）;
添加钻取到boxplot？谢谢！
该方法所采用的正确答案并不理想。对于boxplot不在预期的正确x位置。这在他的例子中可能不是问题，因为他的箱子很窄。但是当我添加离群值时，这是极其有害的。他们不匹配。
抱歉，我没有发布图片和超过2个链接的声望。
i.stack.imgur.com/ YTXbY.png
Highcharts.setOptions（{colors：['＃33FFFF'，' ＃33FFFF'，'＃3333FF'，'＃9933FF'，'＃FF33FF'，'＃FF3399'，'＃FF3333'，'＃FF9933'，'＃FFFF33'，'＃99FF33'，'＃33FF33'，' ＃00F57A'，'＃00B85C']}）; $（function（）{$（'＃container'）。highcharts（{chart：{type：'boxplot'}，title：{text：''}， {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]，键入：'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，l ow：129.687600，q1：155.824800，中位数：177.170200，q3：209.450400，高位：284.302400，名称：'早产中产前A'}]，产品名称：产前早产A，工具提示：{headerFormat：'Observation： '}，pointWidth：24，fillColor：Highcharts.getOptions（）。colors [2]，color：Highcharts.getOptions（）。colors [2]}，{data：[{x：3，low：55.805900，q1：117.463500 ，中位数：139.745800，q3：170.863200，高位：230.989900，名称：'产前中产前B'}]，产品名称：产前早产B，工具提示：{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：产品名称：'产后中产前'，工具提示：{headerFormat：'观察：'}，pointWidth：24，fillColor：Highcharts.getOptions（）。颜色[4]，color：Highcharts.getOptions（）。colors [4]}，{data：[{x：5，low：29.982680，q1：68.503770，median：89.7399 10，q3：98.614430，高：138.395890，名称：'晚产前'}]，名称：'晚产前'，工具提示：{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：'早期婴儿期}}，名称：'早期婴儿期'，工具提示：{headerFormat：'Observation：'}，pointWidth：24，fillColor：Highcharts.getOptions（）。colors [6]，color：Highcharts.getOptions（）。colors [color = red]颜色[6]，类型：'scatter'，数据：[{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'}]，名称：'Early childhood'，工具提示：{headerFormat：'Observation：' }，pointWidth：24，fillColor：Highcharts.getOptions（）。colors [8]，color：Highcharts.getOptions（）。colors [8]}，{name：'Outlier'，color：Highcharts.getOptions（）。colors [ 8]，键入：'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：71.848965}，}}，{data：[{ x：9，低：18.499100，q1：25.500380，中位数：30.374310，q3：36.269800，高：51.134470，名称：'Late childhood'}]，名称：'Late childhood'，工具提示：{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： {x：9，y：84.559888}，}}，{data：[{x：10，low：22.025020，q1：29.279230，median：36.748660，q3：46.518430 ，高：67.598710，名称：'青春期'}]，名称：'青春期'，工具提示：{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，中值：33.398670，q3：40.092060，高：59.317570，名称：'Adulthood'}]，名称：'Adulthood'，工具提示：{headerFormat：'Observation：'}，pointWidth：24，fillColor：Highcharts.getOptions（）。colors [11]，颜色：Highcharts.getOptions（）。colors [11]}，{name：'离群值，color：Highcharts.getOptions（）。colors [11]，type：'scatter'，data：[{x：11，y：80.671587}，{x：11，y：80.671587}，{x：11，y： {x：11，y：64.98078}，{x：11，y：73.643196}，{x：11，y：73.643196}，{x：11，y：63.109206}，{x：11，y： {x：11，y：106.44305}，{x：11，y：106.44305}，{x：11，y：81.019643}，{x：11，y：81.019643}，{x：11，y： {series：[{id：'a'，type：'column'，data：[{y：39.9，name：'name1'），{x：11，y：72.517182}，]}，]， }，{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 =containerstyle =height：400px;保证金：汽车; min-width：400px;
所以我改变了数据的结构，并且设法使它处于正确的位置，但现在它的工具提示的点颜色不再适合。
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，高：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（） 1]，名称：'早产前B'}，{x：2，低：129.687600，q1：155.824800，中值：177.170200，q3：209.450400，高：284.302400，pointWidth：24，fillColor：Highcharts.getOptions（）。colors [2]，颜色：Highcharts.getOptions（）。颜色[2]，名称：'早期产前A'}，{x：3，低：55.805900，q1：117.463500，中位数：139.745800，q3：170.863200，high：230.989900，pointWidth：24，fillColor：Highcharts.getOptions（）。colors [3]，color：Highcharts.getOptions（）。colors [3]，name：'早产中产前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]，名称：'产后中期'}，{x：5，低：29.982680，q1：68.503770，中值：89.739910，q3：98.614430，高：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，中值：58.813590，q3：61.126990，高：68.266470，pointWidth：24，fillColor：Highcharts.getOpti ons（）。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，中值：30.374310，q3：36.269800，高：51.134470，pointWidth：24，fillColor：Highcharts.getOptions（）。colors [9]，color：Highcharts.getOptions（）。colors [9] '晚年儿童'}，{x：10，低：22.025020，q1：29.279230，中位数：36.748660，q3：46.518430，高：67.598710，pointWidth：24，fillColor：Highcharts.getOptions（）。colors [10] 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 />'}}]，钻取：{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 =container2style =height：400px;保证金：汽车; min-width：400px;
