如何在 plotly.js 图表中添加彩色背景条

Posted 2023-02-18

【中文标题】如何在 plotly.js 图表中添加彩色背景条

【英文标题】：How to add colored background bars in plotly.js chart

【发布时间】：2019-07-28 19:51:29

【问题描述】：

如何将“绘图带”或图表中的阴影区域添加到 plotly-js 图表中？看起来像这张照片的东西：

（来自不同的产品：Highcharts）

具体来说，我想为绘图图表的某些部分（多个部分）添加背景颜色，为 X 指定 [xFrom, xTo] 坐标，并使用任意颜色绘制整个 Y 范围。例如，突出显示某个范围内特别感兴趣的时间窗口（例如异常）。

【参考方案1】：

此示例来自文档，但正是您要查找的内容（突出显示时间序列图表中范围的背景）：

（来源：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')

结果：https://plot.ly/create/?fid=jordanpeterson:810#/

【讨论】：

谢谢！这似乎正是我所需要的。您介意将链接添加到您获得它的文档吗？

绝对！我打算链接，然后我意识到它超长而且他们的网站没有配置任何锚点（whomp）。这是完整的页面：plot.ly/python/shapes

太棒了！事实上，我一直在那个页面上并错过了它。如果其他人正在寻找此代码示例，它位于@rgk 链接中的“突出显示具有矩形形状的时间序列区域”下。谢谢！

@herchu 如果 rgk 提供的答案正是您想要的，您会考虑将其标记为已接受的答案吗？这样一来，其他人就可以更轻松地查看问题是否已收到答案。