如何使用Highcharts实现带百分比折线的堆叠柱状图

核心逻辑 #

• 配置双Y轴：左侧Y轴对应堆叠柱状图的实际数值，右侧Y轴对应百分比折线的百分比刻度（固定范围0-100%）
• 数据系列拆分：堆叠柱状图系列开启stacking堆叠属性，百分比折线系列绑定右侧百分比Y轴
• 样式适配：按需调整柱形间距、折线点样式、数据标签格式、图例排布匹配设计需求

完整可运行示例代码 #

// 容器id为container，提前引入Highcharts依赖即可运行
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: '业务数据统计'
  },
  xAxis: {
    categories: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  // 双Y轴配置
  yAxis: [
    {
      title: {
        text: '数值总量'
      },
      stackLabels: {
        enabled: true,
        format: '{total}'
      }
    },
    {
      title: {
        text: '占比'
      },
      opposite: true,
      min: 0,
      max: 100,
      labels: {
        format: '{value}%'
      }
    }
  ],
  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: true
      }
    },
    line: {
      yAxis: 1,
      dataLabels: {
        enabled: true,
        format: '{y}%'
      },
      marker: {
        radius: 4
      }
    }
  },
  series: [
    // 堆叠柱形系列
    {
      name: '渠道A',
      type: 'column',
      data: [120, 150, 180, 170, 200, 220]
    },
    {
      name: '渠道B',
      type: 'column',
      data: [90, 110, 100, 120, 130, 140]
    },
    {
      name: '渠道C',
      type: 'column',
      data: [50, 60, 70, 80, 90, 100]
    },
    // 百分比折线系列
    {
      name: '渠道A占比',
      type: 'line',
      data: [46, 47, 51, 46, 48, 48]
    }
  ]
})

常用调整说明 #

• 堆叠模式切换：如果需要百分比堆叠柱而非数值堆叠，将plotOptions.column.stacking改为'percent'，同步调整左侧Y轴标签格式为百分比即可
• 占比自动计算：如果需要动态生成折线的百分比数据，可在数据预处理阶段遍历每个x轴分类的柱形数值总和，用单系列数值/总数值*100得到对应点的百分比值
• 样式自定义：可通过colors全局配置项调整柱形、折线的配色，通过tooltip配置项自定义悬浮提示框的显示内容和格式

内容的提问来源于stack exchange，提问作者AnDy P. Ruiz