plotly streuen mit dem zweiten X-Achse durch die Zeit (Datum) Intervalle

Question

für das Beispiel (Streudiagramm plotly.js):

Code:

var trace1 = { 
    x: [1, 2, 3, 4], 
    y: [10, 15, 13, 17], 
    mode: 'lines' 
}; 

var trace2 = { 
    x: [2, 3, 4, 5], 
    y: [16, 5, 11, 10], 
    mode: 'lines' 
}; 

var trace3 = { 
    x: [1, 2, 3, 4], 
    y: [12, 9, 15, 12], 
    mode: 'lines' 
}; 

var data = [ trace1, trace2, trace3 ]; 

var layout = { 
    title:'Line and Scatter Plot', 
    height: 400, 
    width: 480 
}; 

Plotly.newPlot('myDiv', data, layout); 

codepen: http://codepen.io/plotly/pen/LVMRMO

Jede Ideen zum Ansatz, wie man das obige Beispiel mit zusätzlichen X-Achsenbeschriftungen hervorhebt, um etwas zu erreichen (eine andere Hintergrundfarbe auf dem Graphen ist nicht wirklich erforderlich, es reicht aus, um eine Anzeige erstellen zu können) d der zweite X-Achsen-Titel): (im Gegensatz zum Beispiel X AXIS WüRDE DATUM BE)

Answer 1

Die Lösung ist in den folgenden Dokumenten, Form unter Verwendung von Zeichnungen auf Leinwand zum Beispiel:

https://plot.ly/javascript/shapes/#highlighting-time-series-regions-with-rectangle-shapes

Mein Code:

 //add highlighting intervals______________________________________ 
$scope.schedule=[ 
    {titel:'title1',start:'2012-01-01 00:01:00',end:'2012-01-31 23:59:00',color:'red'}, 
    {titel:'title2',start:'2012-02-01 00:01:00',end:'2012-02-29 23:59:00',color:'yellow'}, 
    {titel:'title3',start:'2012-03-01 00:01:00',end:'2012-03-31 23:59:00',color:'green'}, 
    {titel:'title4',start:'2012-04-01 00:01:00',end:'2012-04-30 23:59:00',color:'blue'}, 
    {titel:'title5',start:'2012-05-01 00:01:00',end:'2012-05-31 23:59:00',color:'orange'} 
]; 
var shapes = []; 
for(var i=0; i<$scope.schedule.length; i++){ 
    var shape ={}; 
    var shape ={ 
     type: 'rect', 
     // x-reference is assigned to the x-values 
     xref: 'x', 
     // y-reference is assigned to the plot paper [0,1] 
     yref: "paper", 
     x0: $scope.schedule[i].start, 
     y0: 0, 
     x1: $scope.schedule[i].end, 
     y1: 1, 
     fillcolor: $scope.schedule[i].color, 
     opacity: 0.2, 
     line: { 
      width: 0 
     } 
    }; 
    shapes.push(shape); 
} 
$scope.layout.shapes = shapes;