如何将horizontal bar graph与line chart结合且不翻转折线坐标轴

核心实现逻辑 #

不要将折线图与横向柱状图绑定同一套坐标轴，单独为折线图配置独立的隐藏次坐标轴，次坐标轴的维度映射规则和纵向柱状图场景下的X轴完全一致，即可保证折线呈现形式不变、不会随柱状图的横向配置发生倒置。

不同工具的具体实现步骤 #

1. ECharts #

• 基础配置：将主X轴设为值轴、主Y轴设为分类轴，用于承载横向柱状图系列
• 新增次X轴：设置为隐藏状态，类型为分类轴，数据和你原来纵向柱状图场景下的X轴分类完全匹配
• 绑定系列：横向柱状图使用默认的主坐标轴，折线图指定使用次X轴，无需额外翻转配置
• 示例代码片段：

const option = {
  xAxis: [
    { type: 'value' }, // 主X轴：供横向柱状图使用的值轴
    { type: 'category', show: false, data: ['1月', '2月', '3月', '4月'] } // 次X轴：供折线使用的隐藏分类轴
  ],
  yAxis: { type: 'category', data: ['产品A', '产品B', '产品C', '产品D'] }, // 分类Y轴两类系列共用
  series: [
    { type: 'bar', data: [89, 72, 95, 68] }, // 横向柱状图默认绑定主X轴
    { type: 'line', xAxisIndex: 1, data: [30, 78, 55, 92] } // 折线绑定次X轴，不会发生倒置
  ]
}

2. Python Matplotlib #

• 先创建主坐标轴实例，用barh()方法绘制横向柱状图
• 调用twiny()方法创建独立的次X轴实例，专门供折线图使用
• 绘制折线时将分类和主Y轴位置对齐，隐藏次X轴的刻度即可保证呈现效果和纵向场景一致
• 示例代码片段：

import matplotlib.pyplot as plt

# 测试数据
categories = ['产品A', '产品B', '产品C', '产品D']
bar_data = [89, 72, 95, 68]
line_data = [30, 78, 55, 92]

fig, ax1 = plt.subplots()
# 绘制横向柱状图
ax1.barh(categories, bar_data)
# 创建独立次X轴
ax2 = ax1.twiny()
# 绘制折线，和Y轴分类位置一一对应
ax2.plot(line_data, range(len(categories)), color='red', marker='o')
# 隐藏次X轴刻度
ax2.set_xticks([])
plt.show()

3. Highcharts #

• 配置xAxis数组，第一个设为值轴供横向柱状图使用，第二个设为隐藏的分类轴供折线使用
• 折线系列指定xAxis: 1绑定次轴，即可正常呈现，不会随柱状图配置倒置

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