Question

我有一个包含10个系列的图表，因此我想将系列图例分为第一行4个和另一行6个。有没有办法做到这一点？使用legend.itemWidth和legend.width不好。请让我知道这是否是已知的挑战吗？或对此有一种解决方法。我在下面粘贴了我要实现的屏幕截图。

任何帮助将不胜感激。

Answer 1

您可以使用Highcharts wrap 方法来创建自己的图例布局自定义：

Highcharts.wrap(Highcharts.Legend.prototype, 'render', function(proceed) {
  proceed.apply(this, Array.prototype.slice.call(arguments, 1));

  var legend = this,
    legendWidth = legend.legendWidth,
    items = legend.allItems,
    firstLineWidth = 0,
    secondLineWidth = 0,
    firstStartPoint,
    secondStartPoint;

  Highcharts.each(items, function(item, i) {
    if (i < 4) {
      firstLineWidth += item.itemWidth;
    } else {
      secondLineWidth += item.itemWidth;
    }
  });

  firstStartPoint = (legendWidth - firstLineWidth) / 2;
  secondStartPoint = (legendWidth - secondLineWidth) / 2;

  Highcharts.each(items, function(item, i) {
    if (i < 4) {
      item.legendGroup.attr({
        translateX: firstStartPoint
      });
      firstStartPoint += item.itemWidth;
    } else {
      item.legendGroup.attr({
        translateX: secondStartPoint,
        translateY: 18
      });
      secondStartPoint += item.itemWidth;
    }
  });
});

实时演示：http://jsfiddle.net/BlackLabel/7he9btvg/

文档：https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

Answer 2

正如Sachi Tekina所指出的，实现此目标的最佳方法是自定义图例。 Highcharts图例的构建和组装方式意味着您不能如示例中所示将它们分为两行，无论是在代码选项中，还是在使用CSS之后（主要是因为它们使用position: absolute）最终变成了巨大的痛苦。）

这是我使用Highcharts演示之一构建的自定义图例的示例：http://jsfiddle.net/brightmatrix/g0tfe12j/

首先，使用复选框构建自定义图例。请注意break标签以将其中一些推到第二行。

<div align="center">
  <form id="test" name="test" method="post">
    <input type="checkbox" class="myCheckboxClass" name="myCheckbox" series="Tokyo" id="checkbox1" checked><label for="checkbox1">Tokyo</label>
    <input type="checkbox" class="myCheckboxClass" name="myCheckbox" series="New York" id="checkbox2" checked><label for="checkbox1">New York</label>
    <br />
    <input type="checkbox" class="myCheckboxClass" name="myCheckbox" series="Berlin" id="checkbox3" checked><label for="checkbox1">Berlin</label>
    <input type="checkbox" class="myCheckboxClass" name="myCheckbox" series="London" id="checkbox4" checked><label for="checkbox1">London</label>
  </form>
</div>

接下来，您可以使用函数在单击复选框时触发。此功能将查看每个复选框（“系列”）中的自定义属性，并打开或关闭图表中的相关系列：

// when a checkbox is clicked, trigger the function
$(".myCheckboxClass").on('click',function() {
        // get the value of "series", a custom attribute for the checkbox
        var seriesName = $(this).attr("series");
        // if that value matches a series, show or hide it in the chart
        for (i = 0; i < $("#container").highcharts().series.length; i++) {
            if ($("#container").highcharts().series[i].name == seriesName) {
                // if the checkbox is checked, show the dataset
                if ($(this).prop("checked")) {
                    $("#container").highcharts().series[i].show();
                // if the checkbox is unchecked, hide the dataset
                } else {
                    $("#container").highcharts().series[i].hide();
                }
            }
        }
});

然后，您可以使用任意样式将自定义图例与图表匹配。

我希望这对您有帮助。

将高图图例项目分为两行

2 个答案: