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

Question

我有一个饼图，它有一个单一的系列，它显示所有数据，这个数据有两种类型的对象，源和目标。默认情况下，出现的图例是每个对象名称，但我需要图例按类型、它们之间的源对象和它们之间的目标对象对对象进行分组。我在 post: 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>

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

Grouping Legends in Pie Chart with Highcharts

javascript

highcharts

pie-chart