0
Temelde tarihlerin x ekseni ve belirli tarihlerdeki etkinlikler için ek açıklamalar olan bir zaman çizelgesine sahibim. Eşit aralıklı değiller çünkü belirli tarihlerde olayları göstermek istiyorum. Tarihlerden birini, ek açıklamanın x konumu olarak belirledim, ancak doğru yerde görünmüyor. İşte keman olduğunu: https://jsfiddle.net/abalter/98phb124/Çizgisel ek açıklama doğru konumda gösterilmiyor
HTML:
<div id="myDiv" style="width: 600px; height: 300px;"></div>
<div id="hoverinfo" style="margin-left:80px;"></div>
JavaScript: community.plot.ly de
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 = '';
});