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

Posted 2023-02-18

【中文标题】Plotly.js：覆盖两个具有相同 x 轴和不同 y 轴比例的不同图形

【英文标题】：Plotly.js : Overlaying two different graphs with same x-axis and different y-axis scales

【发布时间】：2021-11-26 18:37:30

【问题描述】：

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

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

【问题讨论】：

您查看过辅助 yaxis 的文档吗？ plotly.com/javascript/multiple-axes

嘿@DerekO，谢谢。但它可以以 y 轴相互堆叠的方式完成吗？

您可以设置 yaxes 的范围，然后将主 yaxis 的刻度线的下半部分遮住，将辅助 y 轴的刻度线的上半部分遮住。有空时，我很乐意添加示例答案

那太好了。谢谢@DerekO

【参考方案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);