在基于Plot.ly JS的图表上设置变量（yaxis）背景颜色

Question

我尝试了在plot.ly图表中设置背景颜色的所有内容，但到目前为止还没有成功。

我的情节需要与此类似。因此，游泳线在y轴上的特定值之间显示。

我尝试使用Canvas执行此操作，但是我在为图表生成画布对象时遇到了很多问题。

到目前为止我的代码看起来像这样：

(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获得不同背景的最简单方法可能是使用shapes，{{3}}可以在<div class="item-one"> <div class="one">text here</div> <div class="two">more text here</div> </div> <div class="item-two"> <div class="one">text here</div> <div class="two">more text here</div> </div>中设置。

您需要传递layout个对象的列表。将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);