Визуализация данных с помощью CSS: графики, диаграммы и многое другое

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

Критерии достойного представления данных должны быть простыми, но информативными, хорошо проработанными, но при этом поддерживать интерес пользователя, не требовать особого труда, чтобы переваривать его содержимое, быть удобными для сравнения, и, наконец, пользователь должен иметь возможность принимать решения или делать выводы. данные представлены без особых усилий. Какими бы сложными ни казались эти безумные критерии, это возможно.

В сегодняшнем посте мы хотим познакомить вас с различными подходами к красивым и креативным инструментам визуализации данных, которые полностью основаны на CSS / HTML. да просто скопируйте и вставьте, а затем настройте его в соответствии с вашими предпочтениями. Эти диаграммы могут быть гистограммами CSS, которые отображают данные в горизонтальной / вертикальной форме, и даже линейными диаграммами и круговыми диаграммами!

Ты хочешь больше? Продолжайте прокручивать!

Горизонтальная гистограмма

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

гистограмма
CSSplay

Гистограммы – это исчерпывающий список со стилями и классами, определенными в каждой строке. На первой диаграмме есть ошибка, которая возникает, когда значения приближаются к 100%, что исправлено на второй диаграмме. Исходный код включен для вашей справки.

cssplay
Гистограмма процента

Используя возможности CSS по ширине в процентах, в этом руководстве создается гистограмма на основе процентов. На горизонтальной гистограмме вы можете либо настроить маркер для перемещения по длине слева направо, либо создать вертикальный график, используя ту же технику и воспроизводя ее несколько раз.

Гистограмма процента
Maxdesign

Расс Уикли научит вас создавать график на основе процентов и с использованием фоновых изображений. Связанный код и изображения можно скопировать и загрузить для использования в вашем проекте.

процент
Вертикальная гистограмма

Создавайте вертикальные гистограммы с помощью CSS и PHP, создав простой список с высотой в пикселях отдельной полосы, осью Y группы полос и класса для стилизации наборов данных. Эрик Мейер учит превращать то же самое в гистограмму, линейный график, точечный график и трехмерный график, используя одни и те же методы.

vertical_bar_graphs
Линейный график на чистом CSS

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

css-линейный график
Простой линейный график

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

линейный график
Mgraph

Этот график Ajax используется для представления данных за год по каждому месяцу с использованием только CSS и XHTML и работает в Firefox и Opera.

ajax-mgraph
Многоколоночные списки

В этой статье Пол Новицки научит вас создавать список из нескольких столбцов с помощью CSS. Он обсуждает множество техник, таких как перемещение разделенных списков, их нумерация с помощью атрибута HTML, контент, сгенерированный CSS, упаковка списка с помощью XHTML, CSS и т. Д. И, наконец, добавляет небольшой стиль и фоновое изображение для идеального создания многоколоночного списка.

многоколоночные списки
Bulletgraph

Маркированный график сравнивает один показатель с одним или несколькими другими показателями и отображает качественный диапазон характеристик. Они достаточно гибкие для сайтов, управляемых данными. Научитесь создавать маркированный граф с помощью CSS / HTML.

маркер-диаграмма
График простоев

Изначально на графике простоев возникала проблема с отображением длительных интервалов времени на ограниченной площади экрана и сохранением прозрачной схемы событий, что было разъяснено парадигмой ежемесячного календаря.

OnMouseOver () продолжает работать, и для разных типов событий простоя используются разные цвета.

graphTime
Динамический живой график CSS

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

ajaxPing
График производственного плана

График производственного плана создается с использованием класса графа в качестве контейнера графа, а hLine также vLine для рисования разделительных линий. Этот график используется в приложениях интрасети.

Ширина диаграммы рассчитывается в соответствии с отображаемым количеством дней, а высота – с учетом количества смен работы.

graphPlan
Сэндвич-график

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

graphSum
Гистограмма с накоплением

Для составного графа для представления данных используется список определений, затем поля и отступы сбрасываются, чтобы отображаться одинаково во всех браузерах. Оси добавлены и стилизованы, чтобы получить сложенные стержни. В этом уроке подробно рассказывается о каждой детали.

css-stacked-bar-графики
Вертикальная гистограмма
демонстрационный стол

Вертикальная гистограмма используется для отображения гипотетического набора данных. Здесь гистограмма представляет собой простую таблицу и несколько блоков div. Расчет высоты полос и горизонтальных слоев может выполняться в PHP, ASP или в механизме обработки на стороне сервера или через JavaScript на стороне клиента.

Пиграф

Круговые диаграммы упрощают понимание, поскольку их можно использовать во многих цветах, что позволяет легко отличить их от других и не требует много места одновременно. Учебное пособие по созданию простой круговой диаграммы с использованием DHTML / CSS. Вставьте скрипт для круговой диаграммы на свою страницу

круговая диаграмма
Сплетни Piechart

Plotkit хорошо структурирован, это переработанный CanvasGraph, используемый для построения графиков и диаграмм для Javascript. Он поддерживает HTML Canvas, то есть Safari, Opera, Firefox, IE и SVG через программу просмотра Adobe SVG.

сплетни
Другие инструменты визуализации CSS
Визуальные карты CSS

Этот учебник делает карты более доступными, полезными и визуально привлекательными с помощью CSS. Эти карты начинают с организации данных, а затем создают карту, используя эти данные, добавляя несколько стилей, отображая данные в виде всплывающих подсказок, отключая java-скрипт и, наконец, создавая интерактивную карту.

cssmaps
Анимированная полоса прогресса

Анимированный индикатор выполнения создается с использованием CSS с 3 элементами, 1 контейнером и 2 вложенными элементами, а анимация выполняется с использованием анимированного gif. В контейнере используются фоновые изображения с определенной высотой и шириной.

CSS-анимированный индикатор выполнения
Временная шкала CSS

Используя CSS и неупорядоченные списки, можно создать временную шкалу CSS для раздела «О программе» с простой разметкой. Создается симпатичная временная шкала, стилизованная с использованием CSS, которая будет работать, даже если у посетителя не включен CSS.

чистый CSS-шкала времени
Slickmap

SlickMap CSS – это таблица стилей, которая отображает готовые карты сайта из неупорядоченного списка навигации HTML. Его можно настроить в соответствии с вашими потребностями или стилем. SlickMap упрощает процесс проектирования и устраняет необходимость в дополнительном программном обеспечении за счет автоматизации иллюстрации карт сайта.

slickmap
Прокручиваемая таблица CSS

Таблица не всегда должна фиксироваться в данных. Мы можем создать прокручиваемую таблицу с фиксированным заголовком и любым количеством данных, которые можно прокручивать.

bigFourVersion

Пропустили ли мы какие-нибудь инструменты, которые вам показались полезными? Дайте нам знать и поделитесь этим с нами.

Похожие записи

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *