控制以呈现流程图答案

【问题标题】：Control to render a flow chart控制以呈现流程图
【发布时间】：2022-04-12 00:49:12
【问题描述】：

这可能是一个非常愚蠢的问题，但这里什么都没有：是否有任何 asp net 控件、ajax 控件工具包或 html/css 标记来创建类似于单选按钮列表的东西，与通过线或虚线连接的所有单选按钮水平对齐？我会上传一张图片，但我在之前的赏金中失去了所有声誉，看来我必须至少有 10 名代表才能上传一张图片。

基本上，我有一个网络表单，用户在其中输入一些数据，然后该数据有 4 个步骤：草稿、完成、发送到批准、批准。我想在页面顶部有这 4 个步骤，并根据当前状态，检查该功能区上的适当状态。

更新：

一张图片值一千字，所以这就是我需要的：

而且这个控件也应该在代码隐藏中“控制”。

【问题讨论】：

尝试在您的问题中插入相关代码。这会很有帮助！
@Error404：你读过这个问题吗？当我只是询问是否有开箱即用的控件（asp、ajax、html）可以在这种情况下帮助我时，我应该输入什么代码？我已经用一张关于我需要什么的图片更新了这个问题。我终于得到了做到这一点所需的最低代表......但不感谢谁对我的问题评分:)
这就是我的意思。任何相关的代码或图形。
@Error404：好的，用我需要实现的图片更新问题。请问有什么建议吗？
您可以编写自定义服务器控件，将图像作为程序集中的资源，并显示适当的图像。例如，要实现 4 个步骤，您需要 4 张图像（每个步骤一张）。一个只显示第 1 步，然后另一个显示第 1 步到第 2 步，另一个显示第 2 步到第 3 步，还有一个显示第 3 步到第 4 步。或者，您可以使用 HTML 5 画布。我想不出有任何组件或库可以为您做到这一点。

标签： html css asp.net radiobuttonlist flowchart

【解决方案1】：

您可以使用 html/css 轻松完成此操作。

<div class="bubble active"></div>
<div class="connector"></div>
<div class="bubble"></div>
<div class="connector"></div>
<div class="bubble"></div>
<div class="connector"></div>
<div class="bubble"></div>

还有一些基本的css

 .bubble
{
border-radius:50%;
height:40px;
width:40px;
background: #aaa;
display:inline-block;
margin:0 -3px;
}

.bubble.active
{
background:red;
}

.connector
{
display:inline-block;
height:3px;
width:10%;
background: #aaa;
vertical-align:middle;
margin-top:-30px;
}

看看这个fiddle。只需随意将活动类添加/删除到气泡中。你还可以添加一个完成的类或其他东西。

【讨论】：

你是个天才！ :) 简单又漂亮！