2017-06-30 3 views
2

J'utilise cet exemple: https://plot.ly/javascript/images/#add-multiple-images et en essayant d'afficher des marqueurs d'image à des dates spécifiques. Lorsque xref est défini sur "x", les images ne s'affichent pas pour les valeurs x telles que "1991-01-15".plotly js marqueurs d'image à des dates spécifiques

Les images montrent si l'axe x n'est pas une date comme dans l'exemple d'origine. paramètre

Plotly.plot('graph', [{ 
 
    x: ['1991-01-01', '1991-02-01', '1991-03-01'], 
 
    y: [1, 2, 3] 
 
}], { 
 
    images: [ 
 
    { 
 
    "source": "https://images.plot.ly/language-icons/api-home/js-logo.png", 
 
    "xref": "paper", 
 
    "yref": "paper", 
 
    "x": 0, 
 
    "y": 1, 
 
    "sizex": 0.2, 
 
    "sizey": 0.2, 
 
    "xanchor": "right", 
 
    "yanchor": "bottom" 
 
    }, 
 
    { 
 
    "source": "https://images.plot.ly/language-icons/api-home/js-logo.png", 
 
    "xref": "x", 
 
    "yref": "y", 
 
    "x": '1991-01-01', 
 
    "y": 2, 
 
    "sizex": 0.5, 
 
    "sizey": 0.5, 
 
    "xanchor": "center", 
 
    "yanchor": "middle" 
 
    }, 
 
] 
 
})
<head> 
 
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
</head> 
 
<body> 
 
    <div id="graph"></div> 
 
</body>

Répondre

0

Apparemment, le "taillex" prend des valeurs en millisecondes lorsque le Xaxis est temps en fonction. Donc, une valeur de 0.5 pour sizex dans mon fragment de code a rendu une très petite image.

Modification du paramètre sizex à deux jours (par exemple 2 * 24 * 60 * 60 * 1000 millisecondes) et maintenant l'image est visible.

Plotly.plot('graph', [{ 
 
    x: ['1991-01-01', '1991-02-01', '1991-03-01'], 
 
    y: [1, 2, 3] 
 
}], { 
 
    images: [ 
 
    { 
 
    "source": "https://images.plot.ly/language-icons/api-home/python-logo.png", 
 
    "xref": "paper", 
 
    "yref": "paper", 
 
    "x": 0, 
 
    "y": 1, 
 
    "sizex": 0.2, 
 
    "sizey": 0.2, 
 
    "xanchor": "right", 
 
    "yanchor": "bottom" 
 
    }, 
 
    { 
 
    "source": "https://images.plot.ly/language-icons/api-home/js-logo.png", 
 
    "xref": "x", 
 
    "yref": "y", 
 
    "x": '1991-01-01', 
 
    "y": 2, 
 
    "sizex": 2*24*60*60*1000, 
 
    "sizey": 1, 
 
    "xanchor": "center", 
 
    "yanchor": "middle" 
 
    }, 
 
] 
 
})
<head> 
 
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 
</head> 
 
<body> 
 
    <div id="graph"></div> 
 
</body>