Javascript 打印注释未显示在正确位置

我有一个时间轴，基本上是一个日期的x轴，以及特定日期事件的注释。它们的间隔不是均匀的，因为我想显示特定日期的事件。我已经指定其中一个日期作为注释的x位置，但它没有显示在正确的位置。这是一把小提琴：

HTML:

---

在community.plot.ly的艾蒂安用小提琴得到了公认的答案。

设置一个伪yaxis范围应该可以做到这一点

<div id="myDiv" style="width: 600px; height: 300px;"></div>
<div id="hoverinfo" style="margin-left:80px;"></div>

var myPlot = document.getElementById('myDiv');
var hoverinfo = document.getElementById('hoverinfo');

var CA199 = 
    {
        x: ["7/1/2015","7/13/2015", "8/1/2015", "9/1/2015", "9/11/2015","10/1/2015"],
        y: ["", "", "", "", "", ""],
    type: 'linear',
    mode: 'markers'
    };

var data = [CA199];

var layout =
    {
        title: "Title",
        height: 0,
    xaxis:
    {
      tickfont:
      {
        color:"rgb(107, 107, 107)",
        size:11
      },
      ticks:"outside",
      tickwidth:1,
      tickangle:40,
      ticklen:5,
      showticklabels:true,
      showline:true,
      type:"scatter",
      autorange:true,
      tickmode:"auto",
      showgrid: false
        },
    yaxis:
    {
      autorange: true,
      showgrid: false,
      zeroline: false,
      autotick: false,
      ticks: '',
      showticklabels: false,
      showline: false,
    },
        annotations:
    [
      {
        x: "09/11/2015", 
        y: 0, 
        align: "center", 
        arrowcolor: "rgba(255, 0, 255, 0.53)", 
        arrowhead: 5, 
        arrowsize: 1, 
        ax: -0, 
        ay: -50, 
        bgcolor: "rgba(255, 0, 255, 0.29)", 
        bordercolor: "rgba(0, 0, 0, 0)", 
        borderpad: 3, 
        borderwidth: 0, 
        font: {size: 14}, 
        text: "CA12-3: 144", 
        textangle: 0
        }
        ]
    };

Plotly.plot
(
  'myDiv',
  data,
  layout,
  {scrollZoom: true}
);

myPlot
  .on('plotly_hover', function(data)
    {
      var infotext = data.points.map(function(d)
      {
        return (d.data.name+': x= '+d.x+', y= '+d.y.toPrecision(3));
      });
      hoverinfo.innerHTML = infotext.join('');
    })
  .on('plotly_unhover', function(data)
    {
        hoverinfo.innerHTML = '';
    });

yaxis:
{
  range: [0, 1],
  showgrid: false,
  zeroline: false,
  autotick: false,
  ticks: '',
  showticklabels: false,
  showline: false,
},