Как я могу добавить настраиваемую ось Y на основной панели старшей диаграммы?

Question

Я хочу сделать такой график на старшей диаграмме. Как я могу добавить желтую рамку на моем графике

Answer 1

Это можно сделать, добавив дополнительные оси X (в гистограмме оси X являются вертикальными) и установив их как противоположные и связанные с главной осью. Проверьте код и демо-версию, размещенную ниже, и дайте мне знать, если что-то вам непонятно.

Код:

const defaultLabelOptions = {
  opposite: true,
  linkedTo: 0,
  lineWidth: 0,
  tickWidth: 0
};

const defaultAxisTitleOptions = {
  align: 'high',
  rotation: 0,
  margin: 0,
  textAlign: 'center',
  style: {
    'text-decoration': 'underline',
    'font-weight': 'bold'
  }
};

// ...

xAxis: [{
  categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
  title: {
    text: null
  }
}, {
  ...defaultLabelOptions,
  offset: 50,
  labels: {
    align: 'right',
    formatter: function() {
      return labels.le[this.value];
    }
  },
  title: {
    text: 'LE',
    ...defaultAxisTitleOptions
  }
}, {
  ...defaultLabelOptions,
  offset: 110,
  labels: {
    align: 'right',
    formatter: function() {
      return labels.tgt[this.value];
    }
  },
  title: {
    text: 'TGT',
    ...defaultAxisTitleOptions
  }
}]

Демо-версия:

• https://jsfiddle.net/BlackLabel/68hdutxv/

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

• https://api.highcharts.com/highcharts/yAxis.opposite

• https://api.highcharts.com/highcharts/yAxis.linkedTo

Если вы хотите, чтобы между дополнительными осями были линии, вы можете добавить их, используя Highcharts.SVGRenderer: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer