如何在highchart基本栏中添加自定义的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

添加它们