Plotly 中的多个 X 轴

Question

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

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

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

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

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

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);

这将生成以下图表。此链接将帮助您获取更多文档。

Answer 2

使用subplots可以实现这一点。下面是一个共享 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);