Разбейте элементы легенды высоких диаграмм на две строки

Как отметила Сачи Текина, лучший способ добиться этого - создать собственную легенду. То, как легенды Highcharts построены и собраны, означает, что вы не можете разбить их на две строки, как вы показали в своем примере, ни в параметрах кода, ни после факта использования CSS (в основном потому, что они используют position: absolute, который может оказаться монументальная боль, с которой нужно возиться).

Вот пример специальной легенды, которую я построил с помощью одной из демонстраций Highcharts: http://jsfiddle.net/brightmatrix/g0tfe12j/

Сначала создайте свою собственную легенду, используя флажки. Обратите внимание на тег разрыва, чтобы переместить некоторые во вторую строку.

<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();
                }
            }
        }
});

Затем вы можете использовать любые стили, чтобы сопоставить настраиваемую легенду с вашей диаграммой.

Надеюсь, это будет вам полезно.

Вы можете использовать метод Highcharts сворачивать, чтобы создать свою собственную настройку для макета легенды:

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/exnding-highcharts/exnding-highcharts