Plotly.js 如何实现同X轴不同Y轴刻度的两条折线图上下堆叠展示？

核心配置逻辑 #

要实现需求只需要通过layout配置多组独立Y轴，调整各Y轴的画布占用范围，再将折线分别绑定对应Y轴即可，不需要额外插件。

• 给两条折线分别绑定两个独立Y轴（y和y2）
• 用Y轴的domain属性定义各自占用的画布垂直范围，实现上下堆叠效果
• 所有Y轴默认绑定同一个X轴，不需要额外配置X轴共享逻辑

完整可运行示例代码 #

<!-- 页面容器 -->
<div id="chart-container" style="width: 800px;height: 600px;"></div>
<script src="https://cdn.plot.ly/plotly-2.20.0.min.js"></script>
<script>
// 第一条折线数据，绑定上方Y轴
const line1 = {
  x: ["1月","2月","3月","4月","5月","6月"],
  y: [23, 32, 18, 45, 37, 52],
  type: "scatter",
  mode: "lines+markers",
  name: "指标A",
  yaxis: "y"
}

// 第二条折线数据，绑定下方Y轴
const line2 = {
  x: ["1月","2月","3月","4月","5月","6月"],
  y: [1200, 1800, 1400, 2300, 1900, 2800],
  type: "scatter",
  mode: "lines+markers",
  name: "指标B",
  yaxis: "y2"
}

const layout = {
  // 共用X轴配置
  xaxis: {
    title: "月份",
    tickangle: -45
  },
  // 上方Y轴配置，占用画布55%~100%的垂直区域
  yaxis: {
    title: "指标A（单位：件）",
    domain: [0.55, 1],
    color: "#1f77b4"
  },
  // 下方Y轴配置，占用画布0%~45%的垂直区域，中间预留10%间距避免重叠
  yaxis2: {
    title: "指标B（单位：元）",
    domain: [0, 0.45],
    anchor: "x",
    color: "#ff7f0e"
  },
  legend: {
    x: 0.5,
    xanchor: "center",
    y: 1.05,
    orientation: "h"
  }
}

Plotly.newPlot("chart-container", [line1, line2], layout)
</script>

自定义调整说明 #

• 要修改上下两部分的高度占比，直接调整两个Y轴domain的数值即可，两个Y轴的domain区间差就是中间预留的间距大小
• 如果需要堆叠更多折线，只需新增yaxis3、yaxis4等配置，依次设置对应domain，并给对应折线绑定对应Y轴即可
• 可以通过color、showgrid等属性分别调整不同Y轴的样式，提升辨识度

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