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

debugcn 投稿 Dev

gdarko

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>

マクシミリアンピーターズ

おそらく、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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]