Plotly.js单图实现双X轴（英寸/厘米单位转换）

嘿，你完全不需要额外添加第二条轨迹！咱们要做的只是给同一个数据配置两套刻度单位，核心是修正副X轴的布局逻辑和单位转换规则，现在给你一步步讲清楚：

修正后的布局代码（直接可用） #

var layout = {
  title: '',
  xaxis: {
    autorange: true,
    rangeslider: {},
    type: 'linear',
    title: 'Inches'
  },
  xaxis2: {
    // 核心1：让副轴锚定Y轴，显示在主X轴下方，而非重叠
    anchor: 'y',
    side: 'bottom',
    autorange: true,
    type: 'linear',
    title: 'Centimeter',
    // 核心2：实现英寸到厘米的单位转换（1英寸=2.54厘米）
    tickmode: 'array',
    // 这里的tickvals对应主X轴的刻度值，ticktext是转换后的厘米值
    // 如果你想动态匹配主轴刻度，后面会讲方法
    tickvals: [0, 1, 2, 3, 4],
    ticktext: ['0', '2.54', '5.08', '7.62', '10.16']
  },
  yaxis: {
    autorange: true,
    type: 'linear',
    title: ''
  },
  // 可选：加大底部边距，避免两个X轴标题重叠
  margin: {
    b: 80
  }
};

动态匹配主X轴刻度（无需手动写tickvals） #

如果你的主X轴刻度是自动生成的，不想手动维护，可以在图表渲染后动态获取主轴刻度，计算对应的厘米值再更新副轴：

// 假设你的图表挂载在ID为"plot-container"的元素上
Plotly.newPlot('plot-container', yourData, layout).then(fig => {
  // 获取主X轴的所有刻度值
  const inchTicks = fig.layout.xaxis.tickvals;
  // 转换为厘米值，保留两位小数更美观
  const cmTicks = inchTicks.map(val => (val * 2.54).toFixed(2));
  // 更新副X轴的刻度配置
  Plotly.update('plot-container', {}, {
    xaxis2: { tickvals: inchTicks, ticktext: cmTicks }
  });
});

关键错误修正&原理说明 #

你之前的代码里有个核心问题：给xaxis2加了overlaying: 'x'，这会让副轴和主轴完全重叠，自然看不到下方的厘米轴。我们需要：

1. 去掉overlaying: 'x'，换成anchor: 'y'+side: 'bottom'，让副轴固定在主X轴下方，和主轴对齐
2. 通过tickvals和ticktext实现单位转换：主轴的每个刻度值对应副轴的转换后数值，这样轨迹会同时对应两个轴的刻度，完全不会变形

如果你的需求真的是1:1数值对应（比如主轴1英寸对应副轴1厘米，虽然不符合实际单位换算），只需要把转换公式里的2.54改成1就行，但还是建议用标准的单位转换逻辑哦。

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