在Plotly中使用多个X轴

Question

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

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

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

我目前正在单独绘制每个图形，但需要将水位数据覆盖到横截面数据上。这需要多个X轴，因为范围不同。在plotly中是否可能实现？我看过网上有人使用Plotly的数据编辑器的视频，但在使用他们的API方面没有找到太多信息。

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

- Chris

Answer 1

@emackey的答案并不能生成多个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);

这将产生以下图形。这个链接将帮助您进一步了解文档。

- HesamDadafarin

Answer 2

这可能可以使用子图实现。以下是一个共享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