在基于 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 中获得不同背景的最简单方法可能是使用可以在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>