在x轴上的Plotly日期没有适当间隔

时间:2016-04-04 03:52:49

标签: javascript date plotly

我试图创建一个基本上没有y轴的时间线图,只有一个带有日期的x轴,以及显示事件发生时间的注释。我把日期放在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 = '';
    });

0 个答案:

没有答案