在特定日期绘制 js 图像标记

Question

我正在使用此示例：https://plot.ly/javascript/images/#add-multiple-images 并尝试在特定日期显示图像标记。将外部参照设置为 "x" 时，图像不会显示像“1991-01-15”这样的 x 值。

如果 x 轴不是原始示例中的日期，则显示图像。

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>

Answer 1

显然，当 x 轴基于时间时，"sizex" 参数采用以毫秒为单位的值。因此，我的代码片段中 sizex 的值为 0.5 呈现出非常小的图像。

将 sizex 参数更改为两天（即 2*24*60*60*1000 毫秒），现在图像可见。

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 图像标记

plotly js image markers on specific dates

javascript

image

plotly

markers