带有虚线或虚线边框的 Plotly 条形图 - 如何实现?

Posted

技术标签:

【中文标题】带有虚线或虚线边框的 Plotly 条形图 - 如何实现?【英文标题】:Plotly bar chart with dotted or dashed border - How to implement? 【发布时间】:2021-10-30 04:32:15 【问题描述】:

我正在尝试创建如下图所示的条形图:

我快到了,但我没有找到任何关于设置虚线或点线边框样式的参考; 下面是我创建的图表的图片:

我将在下面添加一个最小的可重现代码:

import plotly.graph_objects as go

data="years":[2019,2020,2021,2022],
      "total_value":[100000000000,220000000000,350000000000,410000000000]

def bar_styled(data):
    
    blank = 'rgba(0,0,0,0)'
    colors =["#FED241", "#FED241", "#143DCB", blank]

    fig = go.Figure(data=[go.Bar(
        x=data['years'],
        y=data['total_value'],
        marker_color=colors, # marker color can be a single color value or an iterable
        marker_line_width=3
    )])

    fig.update_layout(title_text=None, paper_bgcolor=blank, 
                      height=300, margin="b":4, "t":4, "l":8, "r":8 )
    
    color_list=fig.data[0]["marker"]["color"]
    
    fig.data[0]["marker"]['line']["color"]=['#FED241' if val == blank else  blank for val in color_list]

    fig.update_xaxes(type='category')
    
    return fig

bar_styled(data)

非常感谢任何关于我如何实现这一点的参考或帮助;

提前谢谢你们, 问候, 莱昂纳多

【问题讨论】:

【参考方案1】:

根据this Plotly forum post,条形图无法设置线条样式-我查看了fig.data[0]["marker"]['line']类型为plotly.graph_objs.bar.Marker的对象,有no properties可以让您设置样式行。

但是,您可以绘制空白条以显示 xaxis 刻度,然后使用 Plotly shapes 在其周围绘制一个具有所需样式的矩形。

当您使用fig.add_shape 在条形图上绘制矩形时,第一个条形的中心的 x 坐标将为 0.0,第二个条形的中心将为 1.0,依此类推...这意味着对应于 2022 的条的中间将位于 x 坐标 3.0

并且由于条形的默认宽度是 0.8,这意味着您在绘制矩形时需要将 x0 = 2.6, x1 = 3.4 传递给 fig.add_shape。也可以指定矩形的线型为dash

import plotly.graph_objects as go

data="years":[2019,2020,2021,2022],
      "total_value":[100000000000,220000000000,350000000000,410000000000]

## this only works if the year occurs once in the data
def get_plotly_xcoordinates(year, width=0.8):
    x_location = data["years"].index(year)
    print(x_location)
    return x_location - width/2, x_location + width/2

def bar_styled(data):
    
    blank = 'rgba(0,0,0,0)'
    colors =["#FED241", "#FED241", "#143DCB", blank]

    fig = go.Figure(data=[go.Bar(
        x=data['years'],
        y=data['total_value'],
        marker_color=colors, # marker color can be a single color value or an iterable
        marker_line_width=3
    )])

    fig.update_layout(title_text=None, paper_bgcolor=blank, 
                      height=300, margin="b":4, "t":4, "l":8, "r":8 )
    
    # color_list=fig.data[0]["marker"]["color"]
    
    # fig.data[0]["marker"]['line']["color"]=['#FED241' if val == blank else blank for val in color_list]
    x0,x1 = get_plotly_xcoordinates(2022)

    fig.add_shape(type="rect", xref="x", yref="y",
        x0=x0, y0=0,
        x1=x1, y1=410000000000,
        line=dict(color="#FED241",dash="dash",width=3)
    )

    fig.update_xaxes(type='category')
    
    return fig

fig = bar_styled(data)

【讨论】:

嘿,伙计,它对我来说非常有效;非常感谢你,伙计! 不客气 - 很高兴我的回答对您有所帮助!

以上是关于带有虚线或虚线边框的 Plotly 条形图 - 如何实现?的主要内容,如果未能解决你的问题,请参考以下文章

如何在sencha touch中为条形图提供渐变颜色和为图表背景提供虚线

如何在 WPF 中实现虚线或虚线边框?

UIView 用虚线边框画圆

调整大小时,使用虚线边框使窗口透明

如何删除焦点按钮文本周围的虚线白色边框

带有闪烁边框的表格单元格