Plot.ly JSベースチャートの変数（yaxis）の背景色を設定する

Question

plot.lyグラフで背景色を設定しようとしましたが、これまで成功していません。

私のプロットはこのように見える必要があります。したがって、スイミングラインはy軸上の特定の値の間を見ます。

私はキャンバスでこれを実行しようとしましたが、私はチャートのキャンバスオブジェクトを産卵多くの問題がありました。

は私のコードは、これまでのようになります。

(function($){ 
 

 
    var layout = { 
 
     yaxis: { 
 
      fixedrange: true, 
 
      range: [0, 250] 
 
     }, 
 
     xaxis: { 
 
      fixedrange: true 
 
     }, 
 
    }; 
 
    var options = { 
 
     scrollZoom: false, 
 
     showLink: false, 
 
     modeBarButtonsToRemove: [ 
 
      'sendDataToCloud', 
 
      'zoom2d', 
 
      'pan', 
 
      'pan2d', 
 
      'autoScale2d', 
 
      'lasso2d', 
 
      'autoScale2d', 
 
      'resetScale2d', 
 
      'toggleSpikelines', 
 
      'dragmode' 
 
     ] 
 
    }; 
 

 
    var x = [ 
 
     "2017-06-01 03:41:49", 
 
     "2017-06-02 13:07:46", 
 
     "2017-06-03 23:45:51", 
 
     "2017-06-04 11:29:26", 
 
     "2017-06-05 18:39:31", 
 
     "2017-06-06 23:53:27", 
 
     "2017-06-07 11:40:05", 
 
     "2017-06-08 21:44:24", 
 
     "2017-06-09 09:37:45", 
 
    ]; 
 
    var y = [ 
 
     "100", 
 
     "120", 
 
     "67", 
 
     "160", 
 
     "88", 
 
     "95", 
 
     "134", 
 
     "55", 
 
     "199", 
 
    ]; 
 
    var data = [{ 
 
     x: x, 
 
     y: y, 
 
     type: 'scatter', 
 
     name: 'Levels', 
 
     mode: 'markers', 
 
     marker: { 
 
      size: 16 
 
     } 
 
    }]; 
 
    Plotly.newPlot('myDiv', data, layout, options); 
 

 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 

 
<div id="myDiv"></div>

Answer 1

Plotlyに異なる背景を得るためにおそらく最も簡単な方法は、layoutで設定することができshapesを使用することです。

shapeオブジェクトのリストを渡す必要があります。 xrefとyref〜paperを設定すると、軸の範囲から独立した位置になります。

(function($){ 
 

 
    var layout = { 
 
     yaxis: { 
 
      fixedrange: true, 
 
      range: [0, 250] 
 
     }, 
 
     xaxis: { 
 
      fixedrange: true 
 
     }, 
 
     shapes: [{layer: 'below', 
 
       xref: 'paper', 
 
       yref: 'paper', 
 
       x0: 0, 
 
       x1: 1, 
 
       y0: 0, 
 
       y1: 0.2, 
 
       type: 'rect', 
 
       fillcolor: 'red'}, 
 
       {layer: 'below', 
 
       xref: 'paper', 
 
       yref: 'paper', 
 
       x0: 0, 
 
       x1: 1, 
 
       y0: 0.2, 
 
       y1: 0.3, 
 
       type: 'rect', 
 
       fillcolor: 'yellow'}, 
 
       {layer: 'below', 
 
       xref: 'paper', 
 
       yref: 'paper', 
 
       x0: 0, 
 
       x1: 1, 
 
       y0: 0.3, 
 
       y1: 0.7, 
 
       type: 'rect', 
 
       fillcolor: 'green'}, 
 
       {layer: 'below', 
 
       xref: 'paper', 
 
       yref: 'paper', 
 
       x0: 0, 
 
       x1: 1, 
 
       y0: 0.7, 
 
       y1: 0.8, 
 
       type: 'rect', 
 
       fillcolor: 'yellow'}, 
 
       {layer: 'below', 
 
       xref: 'paper', 
 
       yref: 'paper', 
 
       x0: 0, 
 
       x1: 1, 
 
       y0: 0.8, 
 
       y1: 1, 
 
       type: 'rect', 
 
       fillcolor: 'red'}] 
 
    }; 
 
    
 
    var options = { 
 
     scrollZoom: false, 
 
     showLink: false, 
 
     modeBarButtonsToRemove: [ 
 
      'sendDataToCloud', 
 
      'zoom2d', 
 
      'pan', 
 
      'pan2d', 
 
      'autoScale2d', 
 
      'lasso2d', 
 
      'autoScale2d', 
 
      'resetScale2d', 
 
      'toggleSpikelines', 
 
      'dragmode' 
 
     ] 
 
    }; 
 

 
    var x = [ 
 
     "2017-06-01 03:41:49", 
 
     "2017-06-02 13:07:46", 
 
     "2017-06-03 23:45:51", 
 
     "2017-06-04 11:29:26", 
 
     "2017-06-05 18:39:31", 
 
     "2017-06-06 23:53:27", 
 
     "2017-06-07 11:40:05", 
 
     "2017-06-08 21:44:24", 
 
     "2017-06-09 09:37:45", 
 
    ]; 
 
    var y = [ 
 
     "100", 
 
     "120", 
 
     "67", 
 
     "160", 
 
     "88", 
 
     "95", 
 
     "134", 
 
     "55", 
 
     "199", 
 
    ]; 
 
    var data = [{ 
 
     x: x, 
 
     y: y, 
 
     type: 'scatter', 
 
     name: 'Levels', 
 
     mode: 'markers', 
 
     marker: { 
 
      size: 16 
 
     } 
 
    }]; 
 
    Plotly.newPlot('myDiv', data, layout, options); 
 

 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> 
 

 
<div id="myDiv"></div>