按时间（日期）间隔用第二个 x 轴绘制散点图答案

【问题标题】：plotly scatter with second x axis by time(date) intervals按时间（日期）间隔用第二个 x 轴绘制散点图
【发布时间】：2016-04-25 16:18:56
【问题描述】：

对于示例（散点图 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);

代码笔： http://codepen.io/plotly/pen/LVMRMO

关于如何使用额外的 x 轴标签突出显示上述示例以实现类似的方法的任何想法（实际上并不需要图表上的不同背景颜色，只要能够添加第二个 x 轴标题就足够了): （不像示例 X 轴是日期）

【问题讨论】：

标签： javascript layout plotly

【解决方案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;

【讨论】：