在 highchart 水平图例的列中分组系列名称

Question

我目前正在使用 highcharts，我的项目需要在图例中将系列名称的类别组合在一起，但我似乎找不到这样做的方法。

PM 希望在图例的 3 列中显示 3 个“类别”的数据系列。最大的问题是，这 3 个类别中的一个类别具有可变数量的元素，具体取决于选择包含在图表中的特征。

例如

在一个例子中，该系列可能是：

苹果、梨、辣椒、黄瓜、甜菜、橙子、土豆、西红柿、萝卜

它们需要显示在图例中，例如：

+------------------------------+
| Apples    Tomatoes  Beet     |
| Oranges   Peppers   Potatoes |
| Pears     Cucumbers Turnips  |
+------------------------------+

在另一种情况下，该系列可能是：

西红柿、苹果、橙子、辣椒、黄瓜、土豆、梨

它们需要显示在图例中，例如：

+------------------------------+
| Apples    Tomatoes  Potatoes |
| Oranges   Peppers            |
| Pears     Cucumbers          |
+------------------------------+

有没有办法使用可变数量的系列获得这种类型的格式？

Answer 1

使用默认 API 无法做到这一点，但您可以创建自定义图例来负责构建适当的数组。

如何创建自定义图例的示例：http://jsfiddle.net/N3KAC/87/

$(function() {
  $('#container').highcharts({
    title: {
      text: ''
    },
    legend: {
      enabled: false
    },

    series: [{
      name: 'Potatoes',
      data: [1, 2, 3, 4, 5]
    }, {
      name: 'Tomatoes',
      data: [7, 6, 5, 4, 3]
    }]
  }, function(chart) {

    $legend = $('#customLegend');

    $.each(chart.series, function(j, series) {

      $legend.append('<div class="item"><div class="symbol" style="background-color:' + series.color + '"></div><div class="serieName" id="">' + series.name + '</div></div>');

    });

    $('#customLegend .item').click(function() {
      var inx = $(this).index(),
        series = chart.series[inx];

      if (series.visible)
        series.setVisible(false);
      else
        series.setVisible(true);
    });

  });
});

.symbol {
  width: 20px;
  height: 20px;
  margin-right: 20px;
  float: left;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.serieName {
  float: left;
  cursor: pointer;
}
.item {
  height: 40px;
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="customLegend"></div>