React Highcharts如何实现垂直柱图与水平堆叠条形图混合展示

问题背景 #

开发混合图表时，需要同时展示两类柱形：下方为常规垂直柱状图，上方为水平方向的堆叠条形图。
最初修改公共系列配置defaultColumnSeries，统一设置type: 'bar'、绑定1号x/y轴后，所有柱形全部变为水平方向，不符合保留下方垂直柱形的需求。
最初修改的配置如下：

var defaultColumnSeries = {
  type: 'bar',
  stacking: 'normal',
  dataLabels: {
    enabled: true,
    style: {
      fontSize: '9px'
    }
  },
  showInLegend: false,
  groupPadding: 0.1,
  yAxis: 1,
  xAxis: 1
}

问题原因 #

直接在公共默认系列配置中全局指定type: 'bar'，会让所有引用该配置的系列都继承水平条形图属性。同时Highcharts中bar类型本质是坐标轴翻转后的column类型，如果两类柱形共用同一组坐标轴，会触发全局轴方向翻转，导致所有柱形统一变为水平方向。

正确配置步骤 #

• 拆分系列配置，不要在公共默认配置中统一设置type属性
  仅给需要展示为水平堆叠条形图的上方系列单独设置type: 'bar'、stacking: 'normal'，下方需要保留垂直效果的系列单独设置type: 'column'，两类系列的类型属性分开定义，不共用。
• 配置两组独立的x/y轴，分别给两类系列做分区渲染
  通过轴的位置、宽高配置划分上下两个图表区域，避免轴方向冲突，示例配置如下：

  xAxis: [
    // 0号x轴：绑定下方垂直柱状图
    {
      categories:  /* 对应垂直柱的分类数据 */,
      top: '55%',
      height: '40%'
    },
    // 1号x轴：绑定上方水平堆叠条形图
    {
      categories: /* 对应水平堆叠图的分类数据 */,
      height: '45%',
      offset: 0
    }
  ],
  yAxis: [
    // 0号y轴：绑定下方垂直柱状图
    {
      title: { text: '垂直柱指标值' },
      top: '55%',
      height: '40%',
      offset: 0
    },
    // 1号y轴：绑定上方水平堆叠条形图
    {
      title: { text: '堆叠条指标值' },
      height: '45%'
    }
  ]
  

• 给每个系列单独指定绑定的坐标轴和个性化配置
  水平堆叠系列绑定1号x/y轴，垂直柱系列绑定0号x/y轴，示例：

  series: [
    // 上方水平堆叠条形图系列
    {
      name: '堆叠分类1',
      type: 'bar',
      data: /* 对应数据 */,
      stacking: 'normal',
      xAxis: 1,
      yAxis: 1,
      dataLabels: {
        enabled: true,
        style: { fontSize: '9px' }
      },
      showInLegend: false,
      groupPadding: 0.1
    },
    {
      name: '堆叠分类2',
      type: 'bar',
      data: /* 对应数据 */,
      stacking: 'normal',
      xAxis: 1,
      yAxis: 1,
      dataLabels: {
        enabled: true,
        style: { fontSize: '9px' }
      },
      showInLegend: false,
      groupPadding: 0.1
    },
    // 下方垂直柱状图系列
    {
      name: '垂直柱分类1',
      type: 'column',
      data: /* 对应数据 */,
      xAxis: 0,
      yAxis: 0,
      // 按需添加自定义配置
    }
  ]
  

配置时可根据实际展示需求调整两个分区的高度、间距、偏移量，避免两个区域的图表内容重叠。

内容的提问来源于stack exchange，提问作者Aaron