Overlaying x axis doesn't work correctly.
Offen
Dieses Issue hat noch niemand übernommen.
bug
P3
- Vorherrschende Sprache
- JavaScript
- Sterne
- 18.3k
- Forks
- 2k
- Ø Merge
- 2 T. 12 Std.
- Gemergte PRs (30 T.)
- 28
Beschreibung
I was trying to create a plot, with 8 tracks divided in 2 subplots arranged in a grid, where 7 tracks share same x axis and one of them will have a different x axis. here is sample
var data = [{
x: [
0,
90,
180,
270,
],
y: [
0,
26,
408,
24,
],
type: "scatter",
yaxis: "y",
xaxis: "x",
name: "Channel 1",
showlegend: true,
visible: true,
marker: {
color: "rgba(76, 198, 233, 0.5)"
},
line: {
width: 2,
color: "rgba(76, 198, 233, 0.5)"
},
fillcolor: "rgba(76, 198, 233, 0.25)",
mode: "lines",
hoverinfo: "none"
},
{
x: [
0,
90,
180,
270,
],
y: [
518,
1212,
696,
9,
],
type: "scatter",
yaxis: "y3",
xaxis: "x",
name: "Channel 2",
showlegend: true,
visible: true,
marker: {
color: "rgba(239, 151, 191, 0.5)"
},
line: {
width: 2,
color: "rgba(239, 151, 191, 0.5)"
},
fillcolor: "rgba(239, 151, 191, 0.25)",
mode: "lines",
hoverinfo: "none"
},
{
x: [
0,
90,
180,
270,
],
y: [
174,
203,
38,
48,
],
type: "scatter",
yaxis: "y5",
xaxis: "x",
name: "Channel 3",
showlegend: true,
visible: true,
marker: {
color: "rgba(245, 150, 50, 0.5)"
},
line: {
width: 2,
color: "rgba(245, 150, 50, 0.5)"
},
fillcolor: "rgba(245, 150, 50, 0.25)",
mode: "lines",
hoverinfo: "none"
},
{
x: [
0,
90,
180,
270,
],
y: [
737,
307,
0,
96,
],
type: "scatter",
yaxis: "y7",
xaxis: "x",
name: "Channel 4",
showlegend: true,
visible: true,
marker: {
color: "rgba(218, 227, 109, 0.5)"
},
line: {
width: 2,
color: "rgba(218, 227, 109, 0.5)"
},
fillcolor: "rgba(218, 227, 109, 0.25)",
mode: "lines",
hoverinfo: "none"
},
{
x: [
0,
90,
180,
270,
],
y: [
3,
108,
314,
218,
],
type: "scatter",
yaxis: "y2",
xaxis: "x2",
name: "Channel 5",
showlegend: true,
visible: true,
marker: {
color: "rgba(178, 74, 195, 0.5)"
},
line: {
width: 2,
color: "rgba(178, 74, 195, 0.5)"
},
fillcolor: "rgba(178, 74, 195, 0.25)",
mode: "lines",
hoverinfo: "none"
},
{
x: [
0,
90,
180,
270,
],
y: [
202,
0,
72,
951,
],
type: "scatter",
yaxis: "y4",
xaxis: "x",
name: "Channel 6",
showlegend: true,
visible: true,
marker: {
color: "rgba(74, 211, 203, 0.5)"
},
line: {
width: 2,
color: "rgba(74, 211, 203, 0.5)"
},
fillcolor: "rgba(74, 211, 203, 0.25)",
mode: "lines",
hoverinfo: "none"
},
{
x: [
0,
90,
180,
270,
],
y: [
98,
303,
1146,
914,
],
type: "scatter",
yaxis: "y6",
xaxis: "x",
name: "Channel 7",
showlegend: true,
visible: true,
marker: {
color: "rgba(106, 155, 188, 0.5)"
},
line: {
width: 2,
color: "rgba(106, 155, 188, 0.5)"
},
fillcolor: "rgba(106, 155, 188, 0.25)",
mode: "lines",
hoverinfo: "none"
},
{
x: [
0,
90,
180,
270,
],
y: [
976,
455,
0,
440,
],
type: "scatter",
yaxis: "y8",
xaxis: "x",
name: "Channel 8",
showlegend: true,
visible: true,
marker: {
color: "rgba(190, 235, 185, 0.5)"
},
line: {
width: 2,
color: "rgba(190, 235, 185, 0.5)"
},
fillcolor: "rgba(190, 235, 185, 0.25)",
mode: "lines",
hoverinfo: "none"
}
];
var layout = {
xaxis: {
domain: [0.05, 0.95],
zeroline: false,
tickfont: {
color: "rgba(255, 255, 255, 1)"
},
tickcolor: "rgba(255, 255, 255, 1)",
linecolor: "rgba(255, 255, 255, 1)",
gridcolor: "rgba(255, 255, 255, 0.12)",
visible: true,
anchor: "y2",
title: {
text: "X axis label",
font: {
color: "rgba(255, 255, 255, 1)"
}
},
type: "linear"
},
paper_bgcolor: "rgba(46, 46, 46, 1)",
plot_bgcolor: "rgba(46, 46, 46, 1)",
legend: {
font: {
color: "rgba(255, 255, 255, 1)"
}
},
barmode: "overlay",
yaxis: {
title: {
text: "Channel 1 [unit 1]",
font: {
color: "rgba(76, 198, 233, 1)"
}
},
showgrid: false,
zeroline: false,
automargin: true,
tickfont: {
color: "rgba(76, 198, 233, 1)"
},
tickcolor: "rgba(76, 198, 233, 1)",
linecolor: "rgba(76, 198, 233, 1)",
side: "left",
anchor: "x",
showspikes: false,
fixedrange: false,
domain: [0.55, 1],
type: "linear"
},
yaxis3: {
title: {
text: "Channel 2 [unit 2]",
font: {
color: "rgba(239, 151, 191, 1)"
}
},
showgrid: false,
zeroline: false,
automargin: true,
tickfont: {
color: "rgba(239, 151, 191, 1)"
},
tickcolor: "rgba(239, 151, 191, 1)",
linecolor: "rgba(239, 151, 191, 1)",
side: "right",
anchor: "x",
showspikes: false,
fixedrange: false,
overlaying: "y",
domain: [0.55, 1],
type: "linear",
},
yaxis5: {
title: {
text: "Channel 3",
font: {
color: "rgba(245, 150, 50, 1)"
}
},
showgrid: false,
zeroline: false,
automargin: true,
tickfont: {
color: "rgba(245, 150, 50, 1)"
},
tickcolor: "rgba(245, 150, 50, 1)",
linecolor: "rgba(245, 150, 50, 1)",
side: "left",
anchor: "free",
showspikes: false,
fixedrange: false,
overlaying: "y",
position: 0,
domain: [0.55, 1],
type: "linear",
},
yaxis7: {
title: {
text: "Channel 4 [unit 4]",
font: {
color: "rgba(218, 227, 109, 1)"
}
},
showgrid: false,
zeroline: false,
automargin: true,
tickfont: {
color: "rgba(218, 227, 109, 1)"
},
tickcolor: "rgba(218, 227, 109, 1)",
linecolor: "rgba(218, 227, 109, 1)",
side: "right",
anchor: "free",
showspikes: false,
fixedrange: false,
overlaying: "y",
position: 1,
domain: [0.55, 1],
type: "linear",
},
yaxis2: {
title: {
text: "Channel 5 [unit 5]",
font: {
color: "rgba(178, 74, 195, 1)"
}
},
showgrid: false,
zeroline: false,
automargin: true,
tickfont: {
color: "rgba(178, 74, 195, 1)"
},
tickcolor: "rgba(178, 74, 195, 1)",
linecolor: "rgba(178, 74, 195, 1)",
side: "left",
anchor: "x",
showspikes: false,
fixedrange: false,
domain: [0.05, 0.5],
type: "linear",
},
yaxis4: {
title: {
text: "Channel 6",
font: {
color: "rgba(74, 211, 203, 1)"
}
},
showgrid: false,
zeroline: false,
automargin: true,
tickfont: {
color: "rgba(74, 211, 203, 1)"
},
tickcolor: "rgba(74, 211, 203, 1)",
linecolor: "rgba(74, 211, 203, 1)",
side: "right",
anchor: "x",
showspikes: false,
fixedrange: false,
overlaying: "y2",
domain: [0.05, 0.5],
type: "linear",
},
yaxis6: {
title: {
text: "Channel 7 [unit 7]",
font: {
color: "rgba(106, 155, 188, 1)"
}
},
showgrid: false,
zeroline: false,
automargin: true,
tickfont: {
color: "rgba(106, 155, 188, 1)"
},
tickcolor: "rgba(106, 155, 188, 1)",
linecolor: "rgba(106, 155, 188, 1)",
side: "left",
anchor: "free",
showspikes: false,
fixedrange: false,
overlaying: "y2",
position: 0,
domain: [0.05, 0.5],
type: "linear",
},
yaxis8: {
title: {
text: "Channel 8 [unit 8]",
font: {
color: "rgba(190, 235, 185, 1)"
}
},
showgrid: false,
zeroline: false,
automargin: true,
tickfont: {
color: "rgba(190, 235, 185, 1)"
},
tickcolor: "rgba(190, 235, 185, 1)",
linecolor: "rgba(190, 235, 185, 1)",
side: "right",
anchor: "free",
showspikes: false,
fixedrange: false,
overlaying: "y2",
position: 1,
domain: [0.05, 0.5],
type: "linear"
},
grid: {
columns: 1,
rows: 2
},
xaxis2: {
showgrid: false,
zeroline: false,
automargin: true,
tickfont: {
color: "rgba(178, 74, 195, 1)"
},
gridcolor: "rgba(255, 255, 255, 0.12)",
tickcolor: "rgba(178, 74, 195, 1)",
linecolor: "rgba(178, 74, 195, 1)",
anchor: "free",
position: 0,
scaleanchor: "x",
type: "linear",
domain: [0.05, 0.95],
overlaying: 'x'
},
showlegend: false
};
Plotly.newPlot("myDiv", data, layout, {
responsive: true
});
I am unable to figure out why track with name "Channel 5" is hiding other tracks behind it, while xaxis2.overlaying is set to 'x' and yaxis6.overlaying = yaxis4.overlaying = yaxis8.overlaying = 'y2'.
here is screen shot.
and code pen https://codepen.io/goyaltushar92/pen/ZYzbjZr
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne damit, das Beispiel aus dem verlinkten CodePen und den Aufruf Plotly.newPlot nachzubilden, und konzentriere dich darauf, wie Channel 5 und xaxis2.overlaying mit dem Raster interagieren. Vergleiche die gerenderten Tracks mit dem bereitgestellten layout und verfolge anschließend das Overlay-Verhalten, bis die Ursache dafür identifiziert ist, dass Channel 5 andere Tracks ausblendet. Als erledigt gilt die Aufgabe, wenn der Reproducer alle Tracks beibehält und gleichzeitig die vorgesehenen überlagerten Achsen erhalten bleiben.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript
- Bereich
- data-visualization
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 38/100