用时间（日期）间隔用第二个x轴进行曲线散射

Question

示例（散点图plotly.js）：

代码：

    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

关于如何使用额外的x轴标签突出显示以上示例以实现类似的方法的任何想法（图表上的不同背景颜色并不是真正需要它足以能够添加第二个x轴标题）： （不适用示例X轴将是日期）

Answer 1

解决方案在以下文档中，使用画布上的形状绘图，例如：

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

我的代码：

      //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;