Как создать коробчатую диаграмму высоких диаграмм с детализацией?

Я новичок в highcharts и javascript.

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

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'
        }]

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

        }]
    }
});

});

Как я могу добавить детализацию в коробочную диаграмму? Благодарность!

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

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

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

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>

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


javascript highcharts boxplot drilldown
person ShaoE    schedule 10.03.2015    source источник
comment
Понятно. На моем сервере highcharts-more.js - старая версия. Я обновил его, и проблема решена!   -  person ShaoE    schedule 19.03.2015

Ответы (1)


arrow_upward
1
arrow_downward

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

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

И демонстрация: http://jsfiddle.net/LrLLU/43/

person Paweł Fus    schedule 10.03.2015
comment
Это действительно быстро и работает! Невероятный! Благодарность! Я заметил, что метка оси X развертки такая же, как и на диаграмме. Я бы хотел, чтобы они были другими. В приведенном выше примере развертки метка оси x совпадает с элементом "name", но в блочной диаграмме используются "категории" элементов из "xAxis". Поэтому я добавляю xAxis: {categories: ['David','Tom'],}, в развертку рядом с «серией», и это не работает. Любое предложение? - person ShaoE; 10.03.2015
comment
Вот как xAxis.type = 'category' работает, см. API. Если решит проблему, то не забудьте принять ответ. - person Paweł Fus; 10.03.2015
comment
Бинго! Итак, я изменил «тип» на «категорию» и добавил «имя» в «данные», и это сработало! Благодарность! - person ShaoE; 10.03.2015
comment
Вы заметили, что ось x (горизонтальная в вашем примере) не совпадает с коробчатой ​​диаграммой. то есть последний прямоугольный график, чей x равен 13, не имеет основной линии на 13. Это может быть не так очевидно, поскольку прямоугольник узкий. Но когда мой код будет выглядеть как в отредактированном выпуске, это будет серьезной проблемой. особенно когда я добавляю выбросы. Я изменил структуру серий блочной диаграммы, чтобы каждая коробка была собрана в одну серию. Но цвет точки легенды всплывающей подсказки не соответствует цвету в данных. Любая идея? - person ShaoE; 19.03.2015
comment
Понятно. На моем сервере highcharts-more.js - старая версия. Я обновил его, и проблема решена! - person ShaoE; 19.03.2015
comment
не могли бы вы помочь мне с другой связанной проблемой? stackoverflow.com/questions/29162967/ - person ShaoE; 24.03.2015