javascript - 多个X轴

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

本质上，一组数据将是一条河流的横截面(宽度，深度)。

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

我目前正在个别图表中绘制每个图表，但需要使该图表将水位数据覆盖到横截面数据上。由于范围不相同，因此需要多个X轴。这在情节上可能吗？我已经在线观看了使用Plotly的数据编辑器的视频，但是在使用他们的API方面并没有发现太多。

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

最佳答案

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

这将产生下图。link将帮助您获取更多文档。