highcharts - Highcharts 水平图例中列中的组系列名称

Question

我目前正在使用 highcharts，并且我的项目要求在图例中将系列名称的类别组合在一起，但我似乎找不到执行此操作的方法。

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

例如

在一个实例中，系列可能是:

苹果、梨、辣椒、 cucumber 、甜菜、橙子、土 bean 、西红柿、萝卜

它们需要像这样显示在图例中:

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

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

西红柿、苹果、橙子、辣椒、 cucumber 、土 bean 、梨

它们需要像这样显示在图例中:

+------------------------------+
| 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>