用Highcharts對餅圖分組的傳奇

Question

我有一個餅圖，它有一個包含它顯示的所有數據的系列，這個數據有兩種類型的對象，即源和命運。默認情況下，出現的圖例是每個對象名稱，但我需要傳說按類型分組對象，它們之間的源對象以及它們之間的命運對象。我在這篇文章中看到類似的東西：Grouping Legends in 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>