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

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

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

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

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

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

CSSplay

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

Процент гистограммы

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

Maxdesign

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

Вертикальная диаграмма

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

Чистый CSS Linegraph

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

Простой Лайнграф

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

MGraph

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

Многоколонные списки

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

Bulletgraph

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

Столбец гистограммы

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

График простоя

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

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

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

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

Гистограмма не всегда должна быть вертикальной. Горизонтальная гистограмма также может быть создан. В этой статье горизонтальная гистограмма с различными цветовыми вариациями создается с использованием класса «горизонтальный график» и с помощью CSS задает высоту графика из разметки..

мультиграф

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

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

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

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

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

Сложенная гистограмма

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

Простой гистограмма

Гистограмма, созданная с использованием CSS и PHP без графической библиотеки и без особых вычислений, используется для полей. Padding делает довольно легко понять технику, которая использовала только