Question

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

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

E.G。

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

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

它们需要在图例中显示：

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

在高级水平图例中的列中对系列名称进行分组

1 个答案: