plotly / plotly/plotly.js

Overlaying x axis doesn't work correctly.

未关闭
#7,300 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

bug P3
主要语言
JavaScript
星标
18.3k
派生
2k
平均合并
2 天 12 小时
30 天内合并 PR
28

描述

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.
Image

and code pen https://codepen.io/goyaltushar92/pen/ZYzbjZr

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

调研方向

首先复现链接的 CodePen 示例和 Plotly.newPlot 调用，重点关注 Channel 5 和 xaxis2.overlaying 如何与网格交互。将渲染出的轨道与提供的 layout 进行比较，然后跟踪 overlay 行为，直到确定 Channel 5 隐藏其他轨道的原因。完成的标准是 reproducer 保留所有轨道，同时保留预期的叠加坐标轴。

由索引模型根据 Issue 内容生成。

评估

技术栈
javascript
领域
data-visualization
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
38/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。