Группировка легенд в круговой диаграмме с высокими диаграммами

Question

У меня есть круговая диаграмма, в которой есть одна серия со всеми данными, которые она показывает, эти данные имеют объекты двух типов, источника и судьбы. По умолчанию появляющиеся легенды относятся к каждому имени объекта, но мне нужно, чтобы легенды группировали объекты по типу, исходные объекты между ними и объекты судьбы между ними. Я видел что-то подобное в этом посте: Grouping Legends in Highcharts, но он не работает для круговых диаграмм, мне нужно то же самое, но оно работает с круговыми диаграммами. Я использую highcharts 4.2.6.

Вот моя круговая диаграмма со всеми ее легендами, мне нужно показать только две легенды, одну для синей секции, а другую для светло-синей секции.

Существует пример моего объекта серии:

{ 
    "id": "Group11App36", 
    "data": [ 
    { 
     "name": "apple.com", 
     "y": 2158959, 
     "origin": "destiny", 
     "color": "#195580" 
    }, 
    { 
     "name": "machtv.info", 
     "y": 46442, 
     "origin": "destiny", 
     "color": "#195580" 
    }, 
    { 
     "name": "10.10.10.151", 
     "y": 462724, 
     "origin": "source", 
     "color": "#8fbbda" 
    }, 
    { 
     "name": "10.10.11.213", 
     "y": 133774, 
     "origin": "source", 
     "color": "#8fbbda" 
    }, 
    { 
     "name": "10.10.8.120", 
     "y": 111039, 
     "origin": "source", 
     "color": "#8fbbda" 
    }, 
    { 
     "name": "10.10.13.99", 
     "y": 69530, 
     "origin": "source", 
     "color": "#8fbbda" 
    }, 
    { 
     "name": "10.10.8.9", 
     "y": 66338, 
     "origin": "source", 
     "color": "#8fbbda" 
    }, 
    { 
     "name": "10.10.12.36", 
     "y": 64559, 
     "origin": "source", 
     "color": "#8fbbda" 
    }, 
    { 
     "name": "10.10.8.251", 
     "y": 57293, 
     "origin": "source", 
     "color": "#8fbbda" 
    }, 
    { 
     "name": "10.10.11.196", 
     "y": 53450, 
     "origin": "source", 
     "color": "#8fbbda" 
    }, 
    { 
     "name": "10.10.12.191", 
     "y": 44372, 
     "origin": "source", 
     "color": "#8fbbda" 
    }, 
    { 
     "name": "10.10.10.119", 
     "y": 43556, 
     "origin": "source", 
     "color": "#8fbbda" 
    }, 
    { 
     "name": "10.10.12.149", 
     "y": 36618, 
     "origin": "source", 
     "color": "#8fbbda" 
    }, 
    { 
     "name": "10.10.11.139", 
     "y": 35831, 
     "origin": "source", 
     "color": "#8fbbda" 
    }, 
    { 
     "name": "10.10.12.42", 
     "y": 35316, 
     "origin": "source", 
     "color": "#8fbbda" 
    }, 
    { 
     "name": "10.10.10.17", 
     "y": 34151, 
     "origin": "source", 
     "color": "#8fbbda" 
    }, 
    { 
     "name": "10.10.10.125", 
     "y": 33135, 
     "origin": "source", 
     "color": "#8fbbda" 
    }, 
    { 
     "name": "10.10.10.117", 
     "y": 32885, 
     "origin": "source", 
     "color": "#8fbbda" 
    }, 
    { 
     "name": "10.10.11.93", 
     "y": 31926, 
     "origin": "source", 
     "color": "#8fbbda" 
    }, 
    { 
     "name": "10.10.12.102", 
     "y": 31816, 
     "origin": "source", 
     "color": "#8fbbda" 
    } 
    ] 
} 

Заранее спасибо!

Answer 1

я не думаю, что его можно без пользовательских легенд

вот пример (с пользовательскими легендах)

var data = [{ "name": "apple.com", "y": 2158959, "origin": "destiny", "color": "#195580" }, { "name": "machtv.info", "y": 46442, "origin": "destiny", "color": "#195580" }, { "name": "10.10.10.151", "y": 462724, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.213", "y": 133774, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.8.120", "y": 111039, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.13.99", "y": 69530, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.8.9", "y": 66338, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.36", "y": 64559, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.8.251", "y": 57293, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.196", "y": 53450, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.191", "y": 44372, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.119", "y": 43556, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.149", "y": 36618, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.139", "y": 35831, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.42", "y": 35316, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.17", "y": 34151, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.125", "y": 33135, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.10.117", "y": 32885, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.11.93", "y": 31926, "origin": "source", "color": "#8fbbda" }, { "name": "10.10.12.102", "y": 31816, "origin": "source", "color": "#8fbbda" }]; 
 
    
 
Highcharts.chart('container', { 
 
    chart: { 
 
    plotBackgroundColor: null, 
 
    plotBorderWidth: null, 
 
    plotShadow: false, 
 
    type: 'pie' 
 
    }, 
 
    title: { 
 
    text: 'Banyantmaya out' 
 
    }, 
 
    tooltip: { 
 
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
 
    }, 
 
    plotOptions: { 
 
    pie: { 
 
     allowPointSelect: true, 
 
     cursor: 'pointer', 
 
     dataLabels: { 
 
     enabled: true, 
 
     formatter: function() { 
 
      return '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2) + ' %'; 
 
     } 
 
     }, 
 
     showInLegend: false 
 
    } 
 
    }, 
 
    series: [{ 
 
    colorByPoint: true, 
 
    data: data 
 
    }] 
 
}, function(chart) { 
 
    $legend = $('#customLegend'); 
 
    
 
    var types = chart.series[0].data.reduce((arr, {origin, color}, i) => { 
 
    var obj = arr.find(o => o.origin === origin); 
 
    if (obj) obj.indexes.push(i); 
 
    else arr.push({ origin, color, indexes: [i] }); 
 
    return arr; 
 
    }, []); 
 

 
    types.forEach(type => { 
 
    $legend.append('<label class="serieLabel" data-name="' + type.origin + '"><span class="symbol" style="background-color:' + type.color + '"></span><span class="name">' + type.origin + '</span></label>'); 
 
    }); 
 

 
    $('#customLegend .serieLabel').click(function() { 
 
    var indexes = types.find(t => t.origin === this.dataset.name).indexes; 
 
    $(this).toggleClass('hide'); 
 
    indexes.forEach((inx, i) => { 
 
     var point = chart.series[0].data[inx]; 
 
     point.setVisible(!point.visible, i === indexes.length - 1); 
 
    }); 
 
    }); 
 
});

div#customLegend { background-color: #fff; text-align: center; padding-bottom: 20px; } 
 
.symbol { width: 12px; height: 12px; -webkit-border-radius: 10px; border-radius: 10px; display: inline-block; } 
 
.name { margin: 0 20px 0 10px; display: inline-block; vertical-align: text-bottom; font-weight: bold; font-size: 14px; } 
 
.serieLabel { cursor: pointer; text-transform: capitalize; } 
 
.serieLabel.hide { opacity: 0.2; }

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container"></div> 
 
<div id="customLegend"></div>