Как сделать highcharts boxplot с детализацией?

Я новичок в высоком чартах и javascript.Как сделать highcharts boxplot с детализацией?

Я пытаюсь сделать коробку с детализацией. Тип диаграммы «boxplot» требует данных, чтобы быть массивом 5 элемента (мин 1-го quatile медианного 3st-quatile максимум), следующим образом:

data: [ 
      [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' 
     }]

Я пробовал много способов сделать их вместе, но ничего не работает. Ниже приведен пример, который я попытался объединить другие люди drilldown и 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' 
      }] 

     }] 
    } 
});

});

Как добавить развертку в boxplot? благодаря!

Метод правильный ответ принят не является идеальным. Для boxplot не находятся в правильной позиции x, как ожидалось. это не может быть проблемой в его примере, потому что его boxplot является узким. Но это чрезвычайно опасно, когда я добавлял выбросы. Они не совпадают.

жаль, что у меня нет репутации для публикации изображений и более 2 ссылок. 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>

Так что я изменил strucure данных. И мне удается сделать это в правильном положении. Но теперь точечный цвет его подсказки больше не подходит.

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>

Любое предложение? Правильное положение и правильный цвет подсказки?

источник

2015-03-10 ShaoE

Got it. Highcharts-more.js на моем сервере - старая версия. Я обновил его, и проблема решена! – ShaoE

Boxplot точка может быть создан как массив (ваш пример) или в качестве объекта:

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

Теперь вы можете добавить детализацию на одну точку (как это требуется от плагина):

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

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

источник

2015-03-10 10:23:36

Это очень быстро и работает! Невероятно! благодаря! Я замечаю, что ярлык оси x детализации такой же, как и boxplot. Я бы хотел, чтобы они были разными. В приведенном выше примере детализации метка оси x совпадает с именем участника, но boxplot использует категории участников от «xAxis». Поэтому я добавляю «xAxis: {categories: ['David', 'Tom'],},' in drilldown рядом с серией ', и это не работает. Любое предложение? – ShaoE

Вот как работает 'xAxis.type = 'category'', см. [API] (http://api.highcharts.com/highcharts#xAxis.categories). Если проблема разрешена, то не забудьте принять ответ. –

Бинго! Поэтому я изменил «тип» на «категорию», и я добавляю «имя» в «данные», и он работает! благодаря! – ShaoE

Как сделать highcharts boxplot с детализацией?

ответ

Смежные вопросы