代码之家 › 专栏 › 技术社区 › Tunneller

使用绘图javascript,如何在子图上有多个轨迹,每个轨迹都有多个y轴?

plotly javascript

Tunneller · 技术社区 · 2 年前

这很奇怪。我试图创建两个次要情节,在顶部情节中有三个痕迹,在第二个情节中有两个痕迹。轴按照我想要的方式绘制。但很少有痕迹出现,只有每个子图的最后一个痕迹。

// Create data for the first subplot (three traces)
const trace1 = {
  x: [1, 2, 3],
  y: [4, 5, 6],
  yaxis: 'y1', // Assign to the first y-axis
  type: 'scatter',
  mode: 'lines',
  name: 'Subplot 1 Trace 1'
};

const trace2 = {
  x: [1, 2, 3],
  y: [6, 5, 4],
  yaxis: 'y2', // Assign to the second y-axis
  type: 'scatter',
  mode: 'lines',
  name: 'Subplot 1 Trace 2'
};

const trace3 = {
  x: [1, 2, 3],
  y: [2, 1, 2],
  yaxis: 'y3', // Assign to the third y-axis
  type: 'scatter',
  mode: 'lines',
  name: 'Subplot 1 Trace 3'
};

// Create data for the second subplot (two traces)
const trace4 = {
  x: [1, 2, 3],
  y: [8, 9, 10],
  yaxis: 'y4', // Assign to the fourth y-axis
  type: 'scatter',
  mode: 'lines',
  name: 'Subplot 2 Trace 1'
};

const trace5 = {
  x: [1, 2, 3],
  y: [10, 9, 7],
  yaxis: 'y5', // Assign to the fifth y-axis
  type: 'scatter',
  mode: 'lines',
  name: 'Subplot 2 Trace 2'
};

// Define layout for the subplots with individual y-axes
// Define layout for the subplots
const layout = {
  title: 'Two Subplots with Different Traces and Individual Y-Axes',
  grid: {rows: 2, columns: 1}, 
  xaxis: {range: [0, 5], domain: [0.1, 0.9]}, // Adjust x-axis domain to make space for the y-axis text
  yaxis: {range: [0, 10],title: 'Y-axis 1', side: 'left', position:0, anchor: 'free' ,
          domain: [0.7,1.0]}, // Y-axis 1 with manual position
  yaxis2: {title: 'Y-axis 2',  side: 'right', position: 0.95, anchor: 'free',
          domain: [0.7,1.0]}, // Y-axis 2 with manual position
  yaxis3: {title: 'Y-axis 3', anchor: 'free',  side: 'left', position: 0.08,
          domain: [0.7,1.0]}, // Y-axis 3 with manual position
  yaxis4: {title: 'Y-axis 4', anchor: 'free',   position: 0.00, domain: [0.0,0.5]}, // Y-axis 4 with manual position
  yaxis5: {title: 'Y-axis 5', position: 0.08, 
           anchor: 'free', domain: [0.0,0.5]}, // Y-axis 5 with manual position
};

// Create the subplots
const traces = [trace1, trace2, trace3, trace4, trace5];

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

如果我尝试对布局进行一个小的调整,那么所有五条曲线和所有轴都会显示出来。但现在只有一个子画面,所有的东西都画在自己的上面,尽管域数组给出了“建议”。

const layout = {
  title: 'Two Subplots with Traces and Individual Y-Axes',
  grid: {rows: 2, columns: 1},
  subplots: [['xy'], ['xy']],
  xaxis: {domain: [0.2, 1.0]}, // Adjust x-axis domain
  yaxis: {title: 'Y-axis 1', domain: [0.7, 1.0], anchor: 'x', side: 'left'}, // Y-axis 1 with manual position
  yaxis2: {title: 'Y-axis 2', domain: [0.7, 1.0], anchor: 'free', overlaying: 'y', side: 'left', position: 0.1}, // Y-axis 2 with manual position
  yaxis3: {title: 'Y-axis 3', domain: [0.7, 1.0], anchor: 'free', overlaying: 'y', side: 'left', position: 0.2}, // Y-axis 3 with manual position
  yaxis4: {title: 'Y-axis 4', domain: [0.0, 0.5], anchor: 'free', overlaying: 'y', side: 'left', position: 0.1}, // Y-axis 4 with manual position
  yaxis5: {title: 'Y-axis 5', domain: [0.0, 0.5], anchor: 'free', overlaying: 'y', side: 'left', position: 0.2}, // Y-axis 5 with manual position
};

关于如何调试,有什么建议吗?谢谢

0 回复 | 直到 2 年前

Tunneller 2 年前

我在chart studio上发现了一个python示例,它解决了同样的问题,下面是他们转换为Javascript的答案。它拥有我所需要的一切——我缺少的是覆盖的要求。。。

感谢~empet/15704/


const layout = {
    width : 900,
    height : 600,
    title :  {
      text: 'Subplots with 3 plot windows referenced to a single yaxis<br>and a subplot with multiple yaxes',
      x: 0.5
    },
    grid:  {rows: 2, columns: 2}, 
    xaxis:  {anchor: 'y',  domain: [0.0, 0.45] },
    xaxis2: {anchor: 'y2', domain: [0.55, 1.0] },
    xaxis3: {anchor: 'y3', domain: [0.0, 0.45] },
    xaxis4: {anchor: 'y4', domain: [0.55, 1.0] },
    yaxis:  {anchor: 'x',  domain: [0.575, 1.0]},
    yaxis2: {anchor: 'x2', domain: [0.575, 1.0]},
    yaxis3: {anchor: 'x3', domain: [0.0, 0.425]},
    yaxis4: {anchor: 'x4', domain: [0.0, 0.425]},
    yaxis5: {anchor: 'free', overlaying: 'y4', side: 'left', position: 0.5},
    yaxis6: {anchor: 'x4', overlaying: 'y4', side: 'right'},
    yaxis7: {anchor: 'free', overlaying: 'y4', side: 'right', position: 0.9}
};


var trace1a = {
  x: [0, 1],
  y: [2, 3],
  name: 'y1a data',
  xaxis: 'x',
  yaxis: 'y',
  type: 'scatter'
};

var trace1b = {
  x: [0,0.5, 1],
  y: [1, 4, 2],
  name: 'y1b data',
  xaxis: 'x',
  yaxis: 'y',
  type: 'scatter'
};


var trace2a = {
  x: [0, 1],
  y: [3, 2],
  name: 'y2a data',
  xaxis: 'x2',
  yaxis: 'y2',
  type: 'scatter'
};

var trace2b = {
  x: [0,0.5, 1],
  y: [2, 4, 1],
  name: 'y2b data',
  xaxis: 'x2',
  yaxis: 'y2',
  type: 'scatter'
};


var trace3a = {
  x: [0, 1],
  y: [2, 3],
  name: 'y3a data',
  xaxis: 'x3',
  yaxis: 'y3',
  type: 'scatter'
};

var trace3b = {
  x: [0,0.5, 1],
  y: [1, 3, 1],
  name: 'y3b data',
  xaxis: 'x3',
  yaxis: 'y3',
  type: 'scatter'
};


var trace4 = {
  x: [1, 2, 3],
  y: [4, 5, 6],
  name: 'y5 data',
  xaxis: 'x4',
  yaxis: 'y4',
  type: 'scatter'
};


var trace5 = {
  x: [2, 3, 4],
  y: [40, 50, 60],
  name: 'y5 data',
  xaxis: 'x4',
  yaxis: 'y5',
  type: 'scatter'
};



var trace6 = {
  x: [4, 5, 6],
  y: [40000, 50000, 60000],
  name: 'y6 data',
  xaxis: 'x4',
  yaxis: 'y6',
  type: 'scatter'
};


var trace7 = {
  x: [5, 6, 7],
  y: [35, 50, 60],
  name: 'y7 data',
  xaxis: 'x4',
  yaxis: 'y7',
  type: 'scatter'
};


// And let's go

const traces = [trace1a, trace1b, trace2a, trace2b, trace3a, trace3b, trace4, trace5, trace6, trace7];

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