plotly / plotly/plotly.js

Layout images disappear in odd cases

Ouverte
#6,788 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

bug P3 sev-3
Langage dominant
JavaScript
Étoiles
18.3k
Forks
2k
Merge moyen
2 j 12 h
PR mergées (30 j)
28

Description

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.

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez avec la reproduction fournie de plotly.js en utilisant add_layout_image, en vous concentrant sur les images de layout référencées par rapport aux axes de données x/y, les valeurs sizex/sizey extrêmes et les coordonnées numériques sur les axes de date. C’est terminé lorsque les images restent visibles avec des dimensions très grandes et lorsque les valeurs de date sont fournies sous forme de nombres entiers, conformément au comportement décrit pour les années sous forme de chaînes.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript
Domaine
data-visualization
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.