plotly / plotly/plotly.js

Layout images disappear in odd cases

Offen
#6,788 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

bug P3 sev-3
Vorherrschende Sprache
JavaScript
Sterne
18.3k
Forks
2k
Ø Merge
2 T. 12 Std.
Gemergte PRs (30 T.)
28

Beschreibung

Two situations where layout images referenced to data can disappear:

  • When one of the size parameters is far, far larger than necessary. Normally (with the default sizing: 'contain') the aspect ratio of the image is preserved, so in the rectangle described by sizex and sizey, one of those is limiting and the non-limiting size can be increased indefinitely with no visible effect. This has a limit though: if you make it something like a million times too big, the image abruptly disappears. (this one is from an example by @celia-plotly)
  • On a date axis, in data arrays integer numbers and integer strings are both treated as years, but in layout images only integer strings are treated as years; integer numbers are treated as milliseconds since 1970 (and with the local UTC offset no less 🤦)

Here's a working example:

import dash
from dash import dcc
import plotly.graph_objects as go
import pandas as pd

# Create a Dash app
app = dash.Dash(__name__)

df = pd.DataFrame.from_records([
    {"Year": 2008, "Tickets Sold": 8000000},
    {"Year": 2009, "Tickets Sold": 9000000},
    {"Year": 2010, "Tickets Sold": 5000000},
    {"Year": 2011, "Tickets Sold": 5000000},
    {"Year": 2012, "Tickets Sold": 7000000},
    {"Year": 2013, "Tickets Sold": 5000000},
    {"Year": 2014, "Tickets Sold": 7000000},
])
fig = go.Figure()
fig.add_trace(go.Scatter(x=df["Year"], y=df["Tickets Sold"]))
for j, row in df.iterrows():
    fig.add_layout_image(
        dict(
            source="https://upload.wikimedia.org/wikipedia/commons/8/8a/Plotly-logo.png",
            xref="x",
            yref="y",
            x=row["Year"],
            y=row["Tickets Sold"],
            sizex=1,
            sizey=1000000,
            xanchor="center",
            yanchor="middle",
        )
    )

# Define the app layout
app.layout = dcc.Graph(figure=fig, style={"height": "50vh"})

if __name__ == "__main__":
    app.run(debug=True)

And if you make sizex bigger, even as high as 10000, nothing changes. But go up to 100000 and the images disappear.

For the date flavor: add fig.update_xaxes(type="date") and sizex=1000*3600*24*365 (one year in msec), the images disappear. You can find them if you zoom out and back in around year 1970. But if you stringify, ie x=str(row["Year"]), they reappear atop the data points again.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit der bereitgestellten plotly.js-Reproduktion unter Verwendung von add_layout_image, wobei der Fokus auf Layout-Bildern liegt, die auf x/y-Datenachsen referenzieren, extremen sizex/sizey-Werten und numerischen Koordinaten auf Datumsachsen. Als erledigt gilt, dass die Bilder bei sehr großen Abmessungen sichtbar bleiben und wenn Datumswerte als Ganzzahlen angegeben werden, entsprechend dem für String-Jahre beschriebenen Verhalten.

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
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.