使用Plotly构建Dash风险分析场景下带自定义柱内指示器的倾斜柱状图

该「Risk Potential」倾斜柱状图本质基于Plotly的*水平条形图（Horizontal Bar Chart）*扩展实现，倾斜视觉效果、柱内自定义指示器均通过布局属性调整、叠加辅助元素完成，无需调用特殊的非公开图表类。如果需要实现柱子本身倾斜的强视觉效果，也可以通过自定义形状绘制实现。

• 基础堆叠水平条形图搭建
  首先根据风险区间（低/中/高风险）创建堆叠水平条形图，不同分段配置对应风险等级的配色：

  import plotly.graph_objects as go
  
  fig = go.Figure()
  # 低风险段
  fig.add_trace(go.Bar(
      y=["极低风险", "低风险", "中风险", "高风险", "极高风险"],
      x=[20, 20, 15, 10, 5],
      orientation='h',
      marker_color='#27ae60',
      name='低风险区间'
  ))
  # 中风险段
  fig.add_trace(go.Bar(
      y=["极低风险", "低风险", "中风险", "高风险", "极高风险"],
      x=[30, 30, 35, 30, 25],
      orientation='h',
      marker_color='#f39c12',
      name='中风险区间'
  ))
  # 高风险段
  fig.add_trace(go.Bar(
      y=["极低风险", "低风险", "中风险", "高风险", "极高风险"],
      x=[50, 50, 50, 60, 70],
      orientation='h',
      marker_color='#c0392b',
      name='高风险区间'
  ))
  # 开启条形堆叠模式
  fig.update_layout(barmode='stack')
  

• 倾斜视觉效果实现
  若仅需视觉层面的倾斜感知，可通过调整y轴标签旋转角度、配合图表宽高比实现：

  fig.update_layout(
      yaxis=dict(
          tickangle=-50, # y轴分类标签倾斜，营造整体倾斜的视觉错觉
          automargin=True,
          ticklabelposition="outside left"
      ),
      height=500,
      width=700,
      bargap=0.4 # 调整条形间距增强错落感
  )
  

  若需要实现柱子本身倾斜的效果，可放弃原生Bar trace，通过fig.add_shape()方法添加旋转后的自定义矩形/多边形作为条形，灵活度更高。

• 柱内自定义指示器添加
  柱内的当前风险值标记通过散点trace叠加实现，可自定义标记样式和数值文本：

  # 各风险评级对应的当前实际值
  current_risk_values = [28, 42, 61, 75, 92]
  # 对应y轴分类的索引位置
  y_axis_positions = [0, 1, 2, 3, 4]
  
  fig.add_trace(go.Scatter(
      x=current_risk_values,
      y=y_axis_positions,
      mode='markers+text',
      marker=dict(
          color='white',
          size=14,
          line=dict(color='#2c3e50', width=2)
      ),
      text=current_risk_values,
      textposition='middle center',
      showlegend=False
  ))
  

• 最后隐藏多余网格线、将x轴范围设为0-100适配百分比展示，即可完成和示例效果一致的图表。

内容的提问来源于stack exchange，提问作者Edmon