Как сделать круговую диаграмму css
Обновлено: 05.07.2024
На сайтах иной раз приходится использовать разные диаграммы, что позволяют наглядно и доступно донести данные до пользователя. Раньше подобные графики делали в Excel, а затем вставляли на сайт картинкой. Но мы ведь живём в век информационных технологий, поэтому хочется вставить диаграмму быстро, просто, да ещё чтобы она была при этом интерактивной и красивой. И вот пришёл Гугл и дал нам такой сервис.
Набор возможных графиков доступен на этой странице. Для каждого графика есть множество параметров, которые позволяют настроить всё по своему вкусу: цвета, положение, заголовки, анимацию и многое другое. Можно обойтись и минимальным набором, если нет желания вдаваться в эти тонкости или когда полностью устраивает стандартный вид графика.
Рассмотрю только два типа графиков — круговую и линейную диаграмму. Остальные типы подключаются по аналогии и разобравшись как добавлять один график, уже легче работать и с другими.
Круговая диаграмма
Такая диаграмма напоминает торт, разрезанный на разного размера куски. Общая сумма всех частей составляет 100%, части делят круг пропорционально своим значениям.
В примере 1 показан код для отображения состава воздуха в виде круговой диаграммы.
Пример 1. Круговая диаграмма
Результат примера показан на рис. 1.
Рис. 1. Вид круговой диаграммы
В том месте документа, куда мы добавляем диаграмму, вставляем следующий код.
Ширину и высоту диаграммы задаём через стили и добавляем идентификатор для работы скрипта. Этот же идентификатор должен быть указан в document.getElementById .
Параметры диаграммы состоят из двух блоков: собственно данные для отображения (переменная data ) и настройки (переменная options ). Первая строка в data задаёт названия последующих колонок и хотя она никак не выводится, без неё отображение происходит некорректно. В options пишется заголовок диаграммы, также можно указать трёхмерность и другие настройки, все они являются необязательными и если не заданы, то принимаются по умолчанию.
Диаграмма получается интерактивной, её части подсвечиваются если навести на них курсор или на легенду.
Гистограмма
Гистограмма — это столбчатая диаграмма, которая удобна для сравнения разных значений между собой. В качестве примера возьмём добычу нефти в XIX веке в России и США (рис. 2). На оси абсцисс (горизонтальная ось) нанесены годы, на оси ординат (вертикальная ось) — добыча нефти в тысячах тонн. Высота прямоугольников соответствует указанному значению.
Рис. 2. Гистограмма
Принцип создания этого типа диаграммы аналогичен предыдущему — добавляем тег
, связываем его со скриптом, в котором хранятся данные для графика и параметры отображения (пример 2).
Пример 2. Гистограмма
Для начала добавляем тег
и указываем ему желаемую ширину и высоту с помощью стилей. Также важен идентификатор через который скрипт будет вставлять выбранный график в элемент
. Сам скрипт в сравнении с предыдущим примером сохраняет свою структуру и состоит из двух редактируемых частей — собственно данные для отображения на графике и различные его настройки. Через параметры hAxis и vAxis добавим для наглядности заголовки осей.
Резюме
Удобно, что сервис ориентирован на пользователей разного уровня подготовки. Можно скопировать прилагающиеся примеры и сразу же получить готовый график стандартного вида. Те пользователи, что станут досконально разбираться во множестве параметров, будут вознаграждены графиками сделанными по их вкусу и подобию дизайна сайта.
Сами графики выводятся достаточно оперативно, к тому же вызываемые файлы при первой загрузке кэшируются, поэтому последующее отображение графиков на сайте происходит быстрее. Поддерживаются все браузеры, включая старые версии Internet Explorer.
Документация сервиса на русский язык не переведена и доступна только на английском, что способно отпугнуть некоторых пользователей. На это есть только одна мантра — учите языки.
Исходники всех проектов из этой книге можно найти здесь.
Обратите внимание, что в этой главе мы будем загружать код напрямую с локального жёсткого диска, а не через веб-сервер. Вам, возможно, потребуется отключить безопасность в Chrome на время разработки. Если в Chrome у вас возникли проблемы с загрузкой изображений или других файлов непосредственно с диска, попробуйте добавить некоторые флаги безопасности в командной строке.
На Mac OS X это будет так:
Кроме того, вы можете загрузить страницы через локальный веб-сервер.
В этой главе мы отобразим некоторые данные путём рисования гистограммы. Это покажет вам основы рисования линий, фигур и текста, затем мы сделаем круговую диаграмму с градиентом.
От автора: в своей первой статье о создании графиков я использовал методы на чистом CSS. Я говорил, что это далеко не лучшие решения в большинстве случаев; слишком много костылей в дизайне придется сделать. А вообще, самым лучшим решением будет комбинация из SVG, JS и CSS для создания графиков.
Почему на canvas?
Существует множество способов создания графиков в сети, а особенно на canvas. Тем не менее, Sara Soueidan советует избегать этого метода:
Но кроме холста есть и другие способы. К примеру, Filament Group написали JQuery плагин под названием Visualize, который собирают всю информацию из таблицы table и на основе полученных данных создает график. Данный метод имеет место, даже если в таблице всего один элемент.
Почему SVG?
Формат SVG предназначен не только для иконок или простых изображений. У него есть свои преимущества для создания графиков. В нашем гайде по SVG мы описали основные преимущества данного формата так:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Маленький размер файлов с хорошим сжатием
Полная масштабируемость (кроме совсем крошечных размеров)
Отлично подходит для ретина дисплеев
Взаимодействие и фильтры
А также можно добавить два ключевых преимущества, которые будут полезны для графиков:
SVG доступен в браузерах (придется совсем немного поработать)
Для помощи можно посмотреть множество SVG фреймворков предназначенных для создания графиков
Начнем. Как же проще всего создать график на SVG?
Графики с помощью img
Создавать графики в SVG так же легко, как и в Illustrator или в другом векторно-ориентированном приложении, затем экспортировать это в SVG и вставить в разметку через тег img:
Как я могу создать круговую диаграмму с помощью CSS, как показано ниже?
О боже! Вы видели инструменты Google Chart?
Это глупо легко реализовать, но моя проблема связана с "внешним API". Если Google решит, может это или Google выйдет из строя, до свидания, график! Но что касается красоты и набора других диаграмм, диаграммы Google - это своего рода классная находка.
Часто создание диаграмм на чистом CSS - не лучший способ. лучше использовать холст или внешние библиотеки.
Вот круговая диаграмма без использования внешних библиотек, с использованием холста html5 (скрипка):
скрипка (код написан на основе это решение)
Но для рисования графиков лучше использовать библиотеки. в apex-charts есть опция под названием sparkline , которая помогает вам убрать лишние вещи и нарисовать минималистичную и чистую диаграмму.
Вот чистая кольцевая диаграмма с использованием библиотеки apex-charts . (Лишнее содержимое удаляется опцией sparkline ):
Насколько мне известно, это невозможно (пока) с css3. Однако новый элемент html5 canvas предоставляет все, что вам нужно. К нему можно легко получить доступ и использовать через javascript. Небольшое руководство по базовому использованию можно найти здесь.
Я видел, как некоторые люди выбирают Google Developers Tool, он очень сложный, он также использует JS, а вам нужен только CSS. Вот самый простой способ, Чистый CSS , с использованием фонового градиента.
Я считаю, что это самое простое решение, использующее только CSS. Несколько упрощено ниже.
Читайте также: