Highcharts: легенда о двухсторонней игре

Question

Я пытаюсь отобразить баланс компании с помощью Highcharts.

Я хочу разместить легенду слева и справа, вот так.

Я не мог найти способ сделать это.

Пожалуйста, помогите мне

Answer 1

Вы можете достичь этого, используя этот подход:

Установите соответствующие параметры легенды:

legend: {
    floating: true,
    align: 'left',
    itemMarginBottom: 15,
    width: 200,
    padding: 0
}

Тогда легенда будет отображаться в двух столбцах. Переберите серии диаграмм в обратном вызове события render и переведите каждый элемент легенды со свойством translateX больше 0 на другую сторону диаграммы. Обратите внимание, что поля графика (слева и справа) должны быть установлены. Проверьте код и демоверсию, размещенную ниже.

Highcharts.chart('container', {
  chart: {
    type: 'column',
    marginLeft: 150,
    marginRight: 100,
    spacingLeft: 10,
    events: {
      render: function() {
        var chart = this,
          offsetLeft = 20,
          element,
          itemX,
          translateX,
          translateY;

        chart.series.forEach(function(series) {
          element = series.legendItem.parentGroup;
          translateY = element.translateY;

          if (element.translateX > 0) {
            translateX = chart.plotWidth + chart.plotLeft + offsetLeft;

            element.translate(translateX, translateY);
          }
        });
      }
    }
  },
  legend: {
    floating: true,
    align: 'left',
    itemMarginBottom: 15,
    width: 200,
    padding: 0
  },
  series: [
    { data: [6, 4, 2], name: 'First' },
    { data: [7, 3, 2], name: 'Second' },
    { data: [9, 4, 8], name: 'Third' },
    { data: [1, 2, 6], name: 'Fourth' },
    { data: [4, 6, 4], name: 'Fifth' },
    { data: [1, 2, 7], name: 'Sixth' },
    { data: [4, 2, 5], name: 'Seventh' },
    { data: [8, 3, 2], name: 'Eighth' },
    { data: [4, 5, 6], name: 'Ninth' },
    { data: [6, 4, 2], name: 'First' },
    { data: [7, 3, 2], name: 'Second' },
    { data: [9, 4, 8], name: 'Third' },
    { data: [1, 2, 6], name: 'Fourth' },
    { data: [4, 6, 4], name: 'Fifth' },
    { data: [1, 2, 7], name: 'Sixth' },
    { data: [4, 2, 5], name: 'Seventh' },
    { data: [8, 3, 2], name: 'Eighth' },
    { data: [4, 5, 6], name: 'Ninth' }
  ]
});

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

Справочник по API

• https://api.highcharts.com/highcharts/chart.events.render
• https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate
• https://api.highcharts.com/highcharts/chart.marginLeft
• https://api.highcharts.com/highcharts/chart.marginRight