`Legendrank` does not work in plotly (pyscript) when `fill` argument is used

Hi,

I am using Python and Plotly in my web application. In my plots, I'd like to set the order of the traces appearing in the legend in a custom way. I saw in the docs and relevant issues/PRs (https://github.com/plotly/plotly.py/issues/2345 and https://github.com/plotly/plotly.js/pull/6918) that it is now possible. It works if I use the example from the docs and run it on my computer but it doesn't work in my web app - it doesn't produce any effect.

In the application, I'm using the latest version of plotly (at least I believe so):

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Plot reliability</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css"/>
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!--    for plotly -->
    <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>

    <link rel="stylesheet" href="css/style.css"/>
    <py-env>
      - numpy
      - matplotlib
      - plotly
      - pandas
      - paths:
        - src/functions.py

I tried also specifying it manually to <script src="https://cdn.plot.ly/plotly-2.30.0.min.js" charset="utf-8"></script>--> following this page but it also didn't work and I'm not sure this is the problem (but could be).

The code that I'm trying to run is something like this, and even if I run it in plotly where the legendrank otherwise works, here it doesn't:

import plotly.graph_objects as go
import numpy as np

# Sample data for demonstration
x = np.linspace(1, 10, 100)
y_mean = np.log(x-0.5)
y_upper = y_mean + 0.1  # Simulated upper bound
y_lower = y_mean - 0.1  # Simulated lower bound
X1 = np.array([1, 5, 8])
Y1 = np.array([0.6, 0.95, 0.85])
hovertemplate = 'X:%{x}<br>Y:%{y}'

# Creating the figure and adding traces
fig = go.Figure()

# Adding upper bound fill trace
fig.add_trace(go.Scatter(x=x, y=y_upper, fill=None, mode='lines', name='Upper Bound', hovertemplate=hovertemplate, legendrank=1))

# Adding mean prediction trace
fig.add_trace(go.Scatter(x=x, y=y_mean, name='Mean Prediction', hovertemplate=hovertemplate, legendrank=2))

# Adding lower bound fill trace
fig.add_trace(go.Scatter(x=x, y=y_lower, fill='tonexty', mode='lines', name='Lower Bound', hovertemplate=hovertemplate, legendrank=3))

# Adding desired reliability markers
fig.add_trace(go.Scatter(x=np.array(X1[0]), y=np.array(Y1[0]), mode='markers', name='Point 1', marker=dict(color='green', size=10), legendrank=4))
fig.add_trace(go.Scatter(x=np.array(X1[1]), y=np.array(Y1[1]), mode='markers', name='Point 2', marker=dict(color='red', size=10), legendrank=5))

# Update layout for a cleaner look
fig.update_layout(
    title='Plot with Custom Legend Order using legendrank',
    xaxis_title='X Axis',
    yaxis_title='Y Axis',
    legend_title='Legend',
    legend=dict(x=1, y=1),
    hovermode='closest'
)

# Show plot
fig.show()

For reference, if I do the example from the docs and tweak it a bit, it still works:

import plotly.graph_objects as go
x = [1,2,3]
y = [1,2,1]

fig = go.Figure()
fig.add_trace(go.Bar(name="fourth", x=["a", "b"], y=[2,1], legendrank=6))
fig.add_trace(go.Bar(name="second", x=["a", "b"], y=[2,1], legendrank=4))
fig.add_trace(go.Bar(name="first", x=["a", "b"], y=[1,2], legendrank=2))
fig.add_trace(go.Bar(name="third", x=["a", "b"], y=[1,2], legendrank=3))
fig.add_shape(
    legendrank=1,
    showlegend=True,
    type="line",
    xref="paper",
    line=dict(dash="5px"),
    x0=0.05,
    x1=0.45,
    y0=1.5,
    y1=1.5,
)

fig.add_trace(go.Scatter(x=x, y=y, name='mean predicted<br>number of trials (P)', legendrank=5))
fig.add_trace(go.Scatter(x=[1], y=[2], mode='markers', name='Point 1', marker=dict(color='green', size=10), legendrank=7))

fig.show()

will show correctly:

Notice that the order in the legend is completely arbitrary in the first example, and doesn't even follow the order in which the traces are added. What is going on here? Am I missing something?

首先，在 PyScript HTML 页面中复现提供的 Python Plotly 示例，并将其与可正常工作的文档示例以及明确固定的 Plotly CDN 脚本进行比较。检查浏览器中使用 fill='tonexty' 的轨迹是如何表示和排序的。当 legendrank 能够持续控制填充轨迹示例的图例顺序时，即视为完成。