使用Highcharts在饼图中对图例进行分组

Question

我有一个饼图，它有一个系列，显示了它显示的所有数据，这个数据有两种类型的对象，源和命运。 默认情况下，出现的图例是每个对象名称，但我需要传说按类型对对象进行分组，它们之间的源对象和它们之间的命运对象。 我在这篇文章中看到类似的东西： 在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>