在海图水平图例中的列中分组系列名称 [英] Group series names in columns in highchart horizontal legend

问题描述

我目前使用highcharts，并且需要我的项目将传说中的系列名称分组在一起，但我似乎无法找到这样做的方法。

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

EG

在一个例子中，系列可能是：苹果，梨，辣椒，黄瓜，甜菜，橘子，土豆，西红柿，白萝卜 p>

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

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

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

西红柿，苹果，橘子，辣椒，黄瓜，土豆， Pears

并且它们需要显示在图例中：

  + ------------------------------ + 
 |苹果西红柿土豆| 
 |橙子辣椒| 
 |梨黄瓜| 
 + ------------------------------ + 
  

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

解决方案

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

$（function（）{$（'＃container'）。highcharts（{title：{text：''}，图例：{enabled：false}，series：[{name：'Potatoes'，data：[1,2,3,4,5]}，{name：'Tomatoes'，data：[7，6，5，4 ，3]}]}，函数（图表）{$ legend = $（'＃customLegend'）; $ .each（c hart.series，function（j，series）{$ legend.append（'< div class =item>< div class =symbolstyle =background-color：'+ series.color +' >< / div>< div class =serieNameid =>'+ 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;向左飘浮; -webkit-border-radius：10px; border-radius：10px;}。serieName {float：left; cursor：pointer;}。item {height：40px; clear：both;}

< script src =https ：< script src =http://code.highcharts.com/highcharts。 js>< / script>< script src =http://code.highcharts.com/modules/exporting.js>< / script>< div id =containerstyle =min -width：400px; height：400px; margin：0 auto>< / div>< div id =customLegend>< / div>

I am currently using highcharts and there is a requirement for my project to group categories of series names together in the legend but I can't seem to find a way to do this.

There are 3 "categories" of data series that the PM would like to have displayed in 3 columns in the legend. The biggest issue is that one of the 3 categories has a variable number of elements depending on the features selected for inclusion in the chart.

E.G.

In one instance the series might be:

Apples, Pears, Peppers, Cucumbers, Beets, Oranges, Potatoes, Tomatoes, Turnips

and they need to be displayed in the legends like:

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

In another case the series might be:

Tomatoes, Apples, Oranges, Peppers, Cucumbers, Potatoes, Pears

and they need to be displayed in the legend like:

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

Is there a way to get this type of formatting with a variable number of series?

解决方案

This is not possible by the use of default API, but you could create custom legend that will take care of building a proper array.

Example of how to create a custom legend: 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>

这篇关于在海图水平图例中的列中分组系列名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！