Question

是否有一些很好的方法来创建流/游泳线图而无需借助脚本或表格？我在谈论显示不同的主机发送数据包（因此X轴上的主机，Y上的时间和目标主机的箭头）。对于表来说似乎有太多的元素（特别是跨越多列的箭头），但另一方面，div很难在水平位置正确定位（它们必须基本上与指定的“列”对齐） “）。

有什么好办法吗？任何帮助框架？（除非真的需要，我不想做帆布的东西）

编辑：忘了添加为什么我根本没有提到图像 - 图表的某些元素应该有：悬停操作，将来可以点击。

Answer 1

我建议使用带有透明alpha图层的PNG文件（用于重叠），并使用CSS绝对定位它们。我没有看到你的整体布局，所以我不能说这是适合你特定情况的最佳方法。

圆形的示例CSS代码，例如：<a class="circle" id="myCircle" href="foo">Foo</a>

a.circle {
  display:block;
  height:100px;
  width:100px;
  background-image:url(/path/to/circle.png);
  background-repeat:no-repeat;
  position:absolute;
  line-height:100px;
  text-align:center;
  }

单个圆元素的代码：

a#myCircle {
  top:234px;
  left:357px;
}

类定义为共享类“circle”的所有锚元素创建一组属性。然后，ID为“myCircle”的锚定位于父元素左上角的坐标为234,357（以像素为单位），并设置position:relative;。

html / css中的流程图

1 个答案: