Question

我的时间轴基本上是日期的x轴，以及特定日期的事件注释。它们的间距不均匀，因为我想在特定日期显示事件。我已将其中一个日期指定为注释的x位置，但它没有显示在正确的位置。这是一个小提琴：https://jsfiddle.net/abalter/98phb124/

HTML：

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

使用Javascript：

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 = '';
    });

Answer 1

在community.plot.ly上的etienne已经接受了一个小提琴的答案。 https://community.plot.ly/t/fine-tuning-annotation-position/760

设置假yaxis范围应该可以解决问题。

https://jsfiddle.net/etpinard/98phb124/7/43

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

Plotly注释未显示在正确的位置

1 个答案: