Javascript Plotly中的多个X轴

我目前正在尝试绘制两组不同的数据，为我们正在处理的数据创建可视化

基本上，一组数据是河流的横截面（宽度、深度）

另一组数据包括水位和记录水位的时间。（深度、时间）

我目前正在绘制每个图形，但需要将水位数据叠加到横截面数据上。这将需要多个X轴，因为范围不同。这可能发生在阴谋中吗？我在网上看过一段视频，视频中有人在使用Plotly的数据编辑器，但在使用他们的API方面没有发现太多

---

另外，我知道一组数据以米为单位，另一组数据以英尺为单位——这些数据被用作示例，最终结果都将以英尺为单位显示。

这可能是使用。下面是一个共享Y轴和独立X轴的示例

var trace1 = {
  x: [1, 2, 3], 
  y: [4, 3, 2], 
  xaxis: 'x2',
  type: 'scatter',
  name: 'trace1'
};

var trace2 = {
  x: [200, 300, 400], 
  y: [2, 3, 4], 
  xaxis: 'x3',
  type: 'scatter',
  name: 'trace2'
};

var data = [trace1, trace2];

var layout = {
  xaxis2: {
    domain: [0.0, 0.45]
  },
  xaxis3: {
    domain: [0.55, 1]
  }
};

Plotly.newPlot('myDiv', data, layout);

---

@emackey answer不会生成多个x轴。这是一种工作语法，在同一个图形上显示两个不同的数据集，一个y轴，两个x轴

var trace1 = {
      x: [1, 2, 3], 
      y: [40, 50, 60], 
      name: 'yaxis data', 
      type: 'scatter'
};

var trace2 = {
      x: [12, 13, 14], 
      y: [4, 5, 6], 
      name: 'yaxis2 data', 
      xaxis: 'x2', 
      type: 'scatter'
};

var data = [trace1, trace2];

var layout = {
      yaxis: {title: 'yaxis title'}, 
      xaxis2: {
            title: 'xaxis2 title', 
            titlefont: {color: 'rgb(148, 103, 189)'}, 
            tickfont: {color: 'rgb(148, 103, 189)'}, 
            overlaying: 'x', 
            side: 'top'
      }
};

Plotly.newPlot('myDiv', data, layout);

这将生成以下图表。这将有助于您获取进一步的文档