时间戳

首页 > 解决方案 > 如何在 highchart 基本栏中添加自定义 y 轴？

highcharts - 如何在 highchart 基本栏中添加自定义 y 轴？

问题描述

条形图

我想在highchart中制作这样的图表。如何在图表中添加黄色框

标签： highcharts

解决方案

它可以通过添加额外的 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
  }
}]

演示：

API参考：



如果您想在附加轴之间添加线条，可以使用以下方法添加它们Highcharts.SVGRenderer：https ://api.highcharts.com/class-reference/Highcharts.SVGRenderer

推荐阅读