Plotly.js：覆盖两个具有相同 x 轴和不同 y 轴比例的不同图形

Question

我在使用 Plotly.js 时在我的应用程序中有一个场景，我需要在同一平面上叠加两个不同的线图，具有相同的 x 轴和不同的 y 轴刻度，如图所示相互堆叠在下图中。我想它看起来像这样：

你能帮我解决这个问题吗？谢谢

Answer 1

您可以创建一个辅助 yaxis，然后设置不同的主要和辅助 yaxes 的范围，还可以设置为每个 yaxes 显示哪些刻度线。为了使事情更通用，我包含了一个函数，该函数创建可用于刻度线的线性间隔数组，以及 y 轴范围的最小值和最大值的一些缩放因子。

您可以查看密码笔here。

function linspace(start, stop, num, endpoint = true) {
    const div = endpoint ? (num - 1) : num;
    const step = (stop - start) / div;
    return Array.from({length: num}, (_, i) => start + step * i);
}

var yaxis_data = [40, 50, 60];
var yaxis2_data = [4,5,6];

var yaxis_data_min = Math.min(...yaxis_data);
var yaxis_data_max = Math.max(...yaxis_data);

var yaxis2_data_min = Math.min(...yaxis2_data);
var yaxis2_data_max = Math.max(...yaxis2_data);

var yaxis_data_range = [0.5*yaxis_data_min, yaxis_data_max];
var yaxis2_data_range = [yaxis2_data_min, 1.5*yaxis2_data_max];

var yaxis_ticks = linspace(yaxis_data_min, yaxis_data_max, 3)
var yaxis2_ticks = linspace(yaxis2_data_min, yaxis2_data_max, 3)

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

var trace2 = {
  x: [2, 3, 4],
  y: yaxis2_data,
  name: 'yaxis2 data',
  yaxis: 'y2',
  type: 'scatter'
};

var data = [trace1, trace2];

var layout = {
  title: 'Double Y Axis Example',
  yaxis: {
    title: 'yaxis title',
    range: yaxis_data_range,
    tickvals: yaxis_ticks
  },
  yaxis2: {
    title: 'yaxis2 title',
    titlefont: {color: 'rgb(148, 103, 189)'},
    tickfont: {color: 'rgb(148, 103, 189)'},
    overlaying: 'y',
    side: 'right',
    range: yaxis2_data_range,
    tickvals: yaxis2_ticks
  }
};

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