javascript - 在基于 Plot.ly JS 的图表上设置变量 ( yaxis ) 背景颜色

Question

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

我的 plotly 需要看起来与这个相似。因此它在 y 轴上的特定值之间具有游泳线。

我尝试使用 Canvas 执行此操作，但在为图表生成 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可以在 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);

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