这很奇怪。我正在尝试创建两个子图,其中顶部图中有三个迹线,第二个图中有两个迹线。轴按照我想要的方式绘制。但几乎没有痕迹出现,只是每个子图的最后一个痕迹。
// 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
};
对于如何调试有什么建议吗?谢谢...
我在 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);