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

我想尽一切办法在

plot.ly

图表中设置背景色，但到目前为止没有成功

我的情节需要和这部相似。所以它在y轴上的特定值之间有游动线

我试着用Canvas来实现这一点，但在为图表生成Canvas对象时遇到了很多问题

到目前为止，我的代码如下所示：

（函数（$）{
变量布局={
亚克斯：{
固定范围：对，
范围：[0250]
},
xaxis：{
固定范围：对
},
};
变量选项={
滚动缩放：错误，
showLink:false，
modeBarButtonsToRemove：[
“sendDataToCloud”，
“zoom2d”，
"潘",，
“pan2d”，
“autoScale2d”，
“lasso2d”，
“autoScale2d”，
“resetScale2d”，
“切换穗线”，
“dragmode”
]
};
变量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",
];
变量y=[
"100",
"120",
"67",
"160",
"88",
"95",
"134",
"55",
"199",
];
风险值数据=[{
x:x，
y:y，
键入：“散布”，
名称：“级别”，
模式：'标记'，
标记：{
尺码：16
}
}];
Plotly.newPlot（'myDiv'，数据，布局，选项）；
})（jQuery）
在Plotly中获取不同背景的最简单方法可能是使用可在
布局中设置的背景

您需要传递
shape
对象的列表。将
xref
和
yref
设置为
paper
可使位置独立于轴的范围


（函数（$）{
变量布局={
亚克斯：{
固定范围：对，
范围：[0250]
},
xaxis：{
固定范围：对
},
形状：[{layer:'below'，
外部参照：“纸张”，
yref:“纸”，
x0:0，
x1:1，
y0:0，
y1:0.2，
键入：“rect”，
fillcolor:'红色'}，
{层：'下面'，
外部参照：“纸张”，
yref:“纸”，
x0:0，
x1:1，
y0:0.2，
y1:0.3，
键入：“rect”，
fillcolor:'黄色'}，
{层：'下面'，
外部参照：“纸张”，
yref:“纸”，
x0:0，
x1:1，
y0:0.3，
y1:0.7，
键入：“rect”，
fillcolor:'绿色'}，
{层：'下面'，
外部参照：“纸张”，
yref:“纸”，
x0:0，
x1:1，
y0:0.7，
y1:0.8，
键入：“rect”，
fillcolor:'黄色'}，
{层：'下面'，
外部参照：“纸张”，
yref:“纸”，
x0:0，
x1:1，
y0:0.8，
y1:1，
键入：“rect”，
fillcolor:'红色'}]
};
变量选项={
滚动缩放：错误，
showLink:false，
modeBarButtonsToRemove：[
“sendDataToCloud”，
“zoom2d”，
"潘",，
“pan2d”，
“autoScale2d”，
“lasso2d”，
“autoScale2d”，
“resetScale2d”，
“切换穗线”，
“dragmode”
]
};
变量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",
];
变量y=[
"100",
"120",
"67",
"160",
"88",
"95",
"134",
"55",
"199",
];
风险值数据=[{
x:x，
y:y，
键入：“散布”，
名称：“级别”，
模式：'标记'，
标记：{
尺码：16
}
}];
Plotly.newPlot（'myDiv'，数据，布局，选项）；
})（jQuery）

您可以在
布局中添加
形状
。非常感谢！这是迄今为止最好的解决方案！