Матвей Земсков

Заметки веб-мастера

Четверг, 04 февраля 2016 12:20

Создаем вертикальный график с помощью CSS

Оцените материал
(2 голосов)

Порой бывает необходимо разместить на странице какой-нибудь график. Оказывается для этих нужд уже существует хороший инструмент, который называется Timelined. По сути — это набор CSS-классов, которые описывают различные элементы графика. Хотелось бы уточнить, что с помощью этого инструмента вы можете создавать только вертикальные CSS-графики.

Для чего же нужны вертикальные графики? Вертикальный график может отражать процесс развития чего-либо, например, какого-нибудь программного продукта. На графике можно перечислить все существующие версии программы и указать какие новые возможности появлялись в нем от версии к версии.

Вертикальный график, созданный с помощью Timelined

График состоит из временной шкалы и блоков с информацией. На временной шкале отмечаются даты каких-либо ключевых событий. К этим меткам «прикрепляются» блоки с описанием этих событий. Блоки размещаются попеременно с разных сторон от временной шкалы.

Хочется отметить, что Timelined - довольно гибкий инструмент. Он имеет много настроек. Например, вы можете размещать на временной шкале метки в виде иконок или изображений, а также настраивать внешний вид блоков.

Итак, давайте познакомимся с Timelined поближе.

Для начала зайдите на страницу инструмента на GitHub. Там вы сможете скачать все необходимые файлы в виде zip-архива.

После загрузки и распаковки советую ознакомиться с файлом demo.html – это обычная статическая страничка, на которой продемонстрированы все основные возможности Timelined. Также вы можете ознакомиться с инструментом, формируя график динамически. Для этого существует другая демо-страница, разработанная с использованием AngularJS.

Чтобы эффективно использовать инструмент нужно разобраться со структурой HTML-кода графика. Выглядит код следующим образом:

HTML

<div class="timeline gray-blue"> 
    <div class="timeline-block"> 
        <div class="timeline-icon"></div>
        <div class="timeline-content"> 
            <p> Any content </p> 
            <div class="timeline-date">Yesterday</div> 
        </div>
    </div>
    …
</div>
  • div.timeline – основной контейнер графика;
  • div.timeline-block – HTML-элемент, отображающий отдельный блок на графике;
  • div.timeline-icon – метка на временной шкале. Блок размещается напротив нее;
  • div.timeline-date – HTML-элемент для размещения даты на временной шкале. Дата обычно размещается рядом с меткой;
  • div.timeline-content - контейнер для размещения содержимого блока. Особых требований к содержимому нет, вы можете размещать в нем обычный текст, изображения, списки и тп;

Возможно изменение внешнего вида графика. Это делается путем добавления дополнительных CSS-классов к основному контейнеру графика (.timeline):

  • .timeline-left – временная шкала будет находиться все время слева, а блоки — справа;
  • .timeline-alternating – положение блоков чередуется: они располагаются то слева, то справа от шкалы;
  • .timeline-collapsing – если основной контейнер уменьшается до определенного значения (800px по-умолчанию) временная шкала будет всегда располагаться слева от блоков;
  • .timeline-with-arrows – по направлению временной шкалы размещаются стрелки (доступно в обычном режиме, а также если временная шкала располагается слева от блоков);

Настройки элемента метки (div.timeline-icon):

  • .timeline-icon-hide-border – отключает рамку у метки;
  • При оформлении меток, вы можете использовать иконочный шрифт Font Awesome и обычные изображения;

    HTML

    	<div class="timeline-icon timeline-icon-hide-border"> <!-- отключаем рамку у метки -->
    		<i class="fa fa-github fa-lg"></i>
    	</div>
    	<!-- или -->
    	<div class="timeline-icon">
    		<img src="/path/to/image/"/>
    	</div>
    		

Прячем содержимое блока (div.timeline-block).

Если вы не хотите показывать содержимое блока, добавьте к HTML-элементу (div.timeline-block) CSS-класс .timeline-block-icon-only. Это сделает HTML-элемент с содержимым (div.timeline-content) невидимым.

Более того, если вы хотите разместить текст вместо иконки (или изображения), добавьте CSS-класс .timeline-icon-text к элементу div.timeline-icon. При желании вы также можете добавить к элементу CSS-класс .timeline-icon-hide-border. При добавлении внутрь контейнера элемента span с текстом, у контейнера появится фон и рамка.

Ознакомьтесь с примером, чтобы лучше понять как это должно выглядеть:

HTML

<div class="timeline-block timeline-block-icon-only">
    <div class="timeline-icon timeline-icon-text timeline-icon-hide-border">
        <span>This is my important text</span>
    </div>
    <div class="timeline-content"></div>
</div>

Изменяем цвет элементов графика

Использование цветовых схем — это самый простой способ изменить цвет шкалы, иконок, расположенных на ней, а также границ у блоков. Названия цветовых схем не требует пояснений: gray-red, gray-blue, blue-yellow-yellow, purple-flirt, blue-blue-blue. Чтобы поменять цвет, добавьте CSS-класс с названием темы к основному контейнеру графика.

В процессе знакомства с возможностями инструмента для создания CSS-графиков, я создал демо-страничку. Вы можете ознакомиться с ней.

Прочитано 1119 раз

Добавить комментарий


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: