ハイチャートを含む円グラフでの凡例のグループ化

Question

私は、それが示すすべてのデータを含む単一の系列を持つ円グラフを持っています。このデータは、ソースと運命の2種類のオブジェクトを持っています。デフォルトでは、表示される凡例は各オブジェクト名の凡例ですが、凡例はオブジェクトをタイプ、それらの間のソースオブジェクト、それらの間の運命オブジェクトでグループ化する必要があります。私はこの記事で同様のものを見ました：Grouping Legends in Highchartsしかし、それは円グラフでは機能しません。同じことが必要ですが、円グラフでも機能します。私はハイチャート4.2.6を使用しています。

は、ここで私は2つだけの伝説、青い部分と水色の部分のために、他の1対1に示した必要な、すべての伝説を持つ私の円グラフです。事前に

{ 
    "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>