在特定日期绘制 js 图像标记 [英] plotly js image markers on specific dates
问题描述
我正在使用这个例子:https://plot.ly/javascript/images/#add-multiple-images 并尝试在特定日期显示图像标记.外部参照设置为x"时，图像不会显示 x 值，例如1991-01-15".
I'm using this example: https://plot.ly/javascript/images/#add-multiple-images and trying to show image markers on specific dates. With xref set to "x", the images are not showing for x values like "1991-01-15".
如果 x 轴不是原始示例中的日期，则图像显示.
The images are showing if x axis is not dates as in the original example.
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>推荐答案
显然，当 xaxis 基于时间时，sizex"参数采用以毫秒为单位的值.因此，我的代码片段中 sizex 的值为 0.5 呈现了一个非常小的图像.
Apparently the "sizex" parameter takes values in milliseconds when the xaxis is time based. So a value of 0.5 for sizex in my code snippet rendered a very tiny image.
将 sizex 参数更改为两天(即 2*24*60*60*1000 毫秒)，现在图像可见.
Changed the sizex parameter to two days (i.e 2*24*60*60*1000 milliseconds) and now the image is 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>这篇关于在特定日期绘制 js 图像标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
