2016-04-04 5 views
0

Ich habe eine Zeitleiste, die im Grunde eine x-Achse von Daten und Anmerkungen für Ereignisse an bestimmten Daten ist. Sie sind nicht gleichmäßig verteilt, weil ich Ereignisse an bestimmten Daten zeigen möchte. Ich habe eines der Daten als x-Position der Anmerkung angegeben, aber es wird nicht an der richtigen Stelle angezeigt. Hier ist eine Geige: https://jsfiddle.net/abalter/98phb124/Plot Annotation nicht am richtigen Ort angezeigt

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

Antwort