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

【问题标题】：plotly js image markers on specific dates在特定日期绘制 js 图像标记
【发布时间】：2017-12-04 07:02:04
【问题描述】：

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

如果 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>

【问题讨论】：

标签： javascript image plotly markers

【解决方案1】：

显然，当 xaxis 是基于时间的时，“sizex”参数以毫秒为单位。因此，我的代码 sn-p 中 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>

【讨论】：