2017-06-30 1 views
2

Ich verwende dieses Beispiel: https://plot.ly/javascript/images/#add-multiple-images und versuche, Bildmarkierungen an bestimmten Daten anzuzeigen. Wenn xref auf "x" gesetzt ist, werden die Bilder nicht für x-Werte wie "1991-01-15" angezeigt.plotly js Bildmarkierungen an bestimmten Daten

Die Bilder zeigen an, ob die x-Achse nicht wie im ursprünglichen Beispiel angegeben ist.

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>

Antwort

0

Anscheinend ist der "SizeX" Parameter nimmt Werte in Millisekunden, wenn die xaxis Zeit basiert. Ein Wert von 0,5 für sizex in meinem Code-Snippet hat also ein sehr kleines Bild ergeben.

Änderte den Parameter Größex in zwei Tagen (d. H. 2 * 24 * 60 * 60 * 1000 Millisekunden) und jetzt ist das Bild sichtbar.

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>

Verwandte Themen