plotly - 如何在 plotly.js 图表中添加彩色背景条
问题描述
如何将“绘图带”或图表中的阴影区域添加到 plotly-js 图表中?看起来像这张照片的东西:
(来自不同的产品:Highcharts)
具体来说,我想为绘图图表的某些部分(多个部分)添加背景颜色,为 X 指定 [xFrom, xTo] 坐标,并使用任意颜色绘制整个 Y 范围。例如,突出显示某个范围内特别感兴趣的时间窗口(例如异常)。
解决方案
此示例来自文档,但正是您要查找的内容(突出显示时间序列图表中范围的背景):
(来源:https ://plotly.com/python/shapes/#highlighting-time-series-regions-with-rectangle-shapes )
import plotly.plotly as py
import plotly.graph_objs as go
trace0 = go.Scatter(
x=['2015-02-01', '2015-02-02', '2015-02-03', '2015-02-04', '2015-02-05',
'2015-02-06', '2015-02-07', '2015-02-08', '2015-02-09', '2015-02-10',
'2015-02-11', '2015-02-12', '2015-02-13', '2015-02-14', '2015-02-15',
'2015-02-16', '2015-02-17', '2015-02-18', '2015-02-19', '2015-02-20',
'2015-02-21', '2015-02-22', '2015-02-23', '2015-02-24', '2015-02-25',
'2015-02-26', '2015-02-27', '2015-02-28'],
y=[-14, -17, -8, -4, -7, -10, -12, -14, -12, -7, -11, -7, -18, -14, -14,
-16, -13, -7, -8, -14, -8, -3, -9, -9, -4, -13, -9, -6],
mode='lines',
name='temperature'
)
data = [trace0]
layout = {
# to highlight the timestamp we use shapes and create a rectangular
'shapes': [
# 1st highlight during Feb 4 - Feb 6
{
'type': 'rect',
# x-reference is assigned to the x-values
'xref': 'x',
# y-reference is assigned to the plot paper [0,1]
'yref': 'paper',
'x0': '2015-02-04',
'y0': 0,
'x1': '2015-02-06',
'y1': 1,
'fillcolor': '#d3d3d3',
'opacity': 0.2,
'line': {
'width': 0,
}
},
# 2nd highlight during Feb 20 - Feb 23
{
'type': 'rect',
'xref': 'x',
'yref': 'paper',
'x0': '2015-02-20',
'y0': 0,
'x1': '2015-02-22',
'y1': 1,
'fillcolor': '#d3d3d3',
'opacity': 0.2,
'line': {
'width': 0,
}
}
]
}
py.iplot({'data': data, 'layout': layout}, filename='timestamp-highlight')
推荐阅读
- python - ARIMA 模型抛出“LinAlgError(“SVD 未收敛”)”错误
- javascript - PHP MYSQL 上传图片和其他数据
- sql - PostgreSQL SUM CASE 表达式与 THEN 1 THEN 0 ELSE 0
- firefox-addon - 永久安装自定义 firefox 网络扩展 - 没有 mozilla 帐户或 Firefox 不稳定版本
- python - 函数输出为整数(TypeError:必须是 str,而不是 int)
- r - 如何加快我的功能,特别是 ggplot 命令?
- tableau-api - Tableau 自动调整大小正在将仪表板的内容扔到各处
- c# - 使用 C# 将许多文档插入到 Mongodb 的最快方法
- c# - C# - 如何在 Windows 窗体中向 GeckoFX 嵌入式浏览器添加 WebP 支持?
- python - 如何将文本附加到第一行的末尾