Блок-схема в html / css - PullRequest
Новая
       4

Блок-схема в html / css

2 голосов
/ 17 июня 2010

Есть ли какой-нибудь хороший способ создать диаграмму потока / плавательной линии без использования сценариев или таблиц?Я говорю о показе разных хостов, отправляющих пакеты (так, хосты по оси X, время по Y и стрелки до хоста назначения).Кажется, что для таблиц слишком много элементов (особенно стрелки, охватывающие несколько столбцов в любом случае), но с другой стороны, элементы div трудно расположить в нужном месте по горизонтали (они должны быть в основном выровнены по указанному столбцу)").

Есть ли хороший выход?Какие-нибудь вспомогательные фреймворки?(Я не хочу делать холст, если в этом нет особой необходимости)

Редактировать: Забыл добавить, почему я вообще не упомянул изображения - некоторые элементы диаграммы должны иметь: действия при наведении курсора и должны нажиматься вбудущее.

1 Ответ

4 голосов
/ 17 июня 2010

Я бы предложил использовать 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;
}

Определение класса создает набор атрибутов для всех якорных элементов, которые разделяют класс «круг».Якорь с идентификатором «myCircle» будет располагаться с координатами 234 357 в пикселях от верхнего левого угла родительского элемента с установленным position:relative;.

...