Круговая диаграмма

Создаем графики, диаграммы на html5

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

Вот такой график у нас в итоге получится

Учимся создавать простой график

Подключаем библиотеки

Настройка Highcharts графика

 $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) < $toolsPeriod = $('.js-valuta-tools-period'), $toolsView = $('.js-valuta-tools-view'), Highcharts.chart('container', < chart: < zoomType: 'x' >, title: < text: '' >, xAxis: < categories: ['фев.12','мар.12','апр.12','май.12','июн.12','июл.12','авг.12','сен.12','окт.12','ноя.12','дек.12','янв.13','фев.13','мар.13','апр.13','май.13','июн.13','июл.13','авг.13','сен.13','окт.13','ноя.13','янв.14','мар.14','апр.14','май.14','июл.14','авг.14','окт.14','ноя.14','дек.14','янв.15','фев.15','мар.15','апр.15','май.15','июн.15','июл.15','авг.15','сен.15','окт.15','ноя.15','янв.16','фев.16','мар.16','апр.16','май.16','июн.16','июл.16','авг.16','сен.16','ноя.16','дек.16','янв.17','фев.17','мар.17','апр.17'], tickmarkPlacement: 'on', title: < enabled: false >, gridLineColor: '#dadada', gridLineWidth: 0, >, yAxis: < opposite: false, endOnTick: false, gridLineColor: '#dadada', gridLineWidth: 1, maxPadding: 0.02, tickLength: 0, labels: < style: < color: '#888' >>, showFirstLabel: false, title: < text: null >>, legend: < enabled: false >, tooltip: < crosshairs: true, shared: true, valueSuffix: ' %', zIndex: 10 >, plotOptions: < area: < fillColor: < linearGradient: < x1: 0, y1: 0, x2: 0, y2: 1 >, stops: [ [0, "#80889E"], [1, "#bdc2cd"] ] >, lineColor: '#ffd249', marker: < radius: 2, lineColor:"#00113c", fillColor: "#fff" >, lineWidth: 1, states: < hover: < lineWidth: 1 >>, threshold: null > >, series: [< type: 'area', name: "Проценты", data: [ 22.246,39.592,39.984,30.184,19.453,27.293,42.483,57.869,70.119,68.649,60.025,60.025,61.201,76.195,79.037,83.545,98.441,101.283,98.343,94.325,103.635,106.477,117.355,120.981,131.467,140.287,143.129,141.071,134.799,156.359,152.047,178.409,174.587,174.195,179.487,179.095,184.191,191.639,208.593,205.653,227.507,229.271,236.915,242.599,255.143,255.829,257.005,267.099,273.273,275.429,273.665,272.391,280.427,286.699,287.091,289.247,296.009 ] >] >); >);

Разберем строчки подробнее

Параметры по оси X

categories — массив с данными, которые будут расположены внизу графика.
gridLineColor — цвет линии
gridLineWidth — ширина линии

xAxis: < categories: ['фев.12','мар.12','апр.12','май.12','июн.12','июл.12','авг.12','сен.12','окт.12','ноя.12','дек.12','янв.13','фев.13','мар.13','апр.13','май.13','июн.13','июл.13','авг.13','сен.13','окт.13','ноя.13','янв.14','мар.14','апр.14','май.14','июл.14','авг.14','окт.14','ноя.14','дек.14','янв.15','фев.15','мар.15','апр.15','май.15','июн.15','июл.15','авг.15','сен.15','окт.15','ноя.15','янв.16','фев.16','мар.16','апр.16','май.16','июн.16','июл.16','авг.16','сен.16','ноя.16','дек.16','янв.17','фев.17','мар.17','апр.17'], tickmarkPlacement: 'on', title: < enabled: false >, gridLineColor: '#dadada', gridLineWidth: 0, >, 

Всплывающая подсказка при наведении на точку

crosshairs — параметр true показывает всплывающую подсказку
valueSuffix — дополнительное текстовая область для понимания, какой тип данных показывается

Настройка стиля самого графика

stops — цвета градиентов
lineColor — цвет линии
Маркер
radius — радиус маркера
lineColor — цвет маркера
fillColor — цвет при наведении на маркер

plotOptions: < area: < fillColor: < linearGradient: < x1: 0, y1: 0, x2: 0, y2: 1 >, stops: [ [0, "#80889E"], [1, "#bdc2cd"] ] >, lineColor: '#ffd249', marker: < radius: 2, lineColor:"#00113c", fillColor: "#fff" >, lineWidth: 1, states: < hover: < lineWidth: 1 >>, threshold: null > >

Данные графика

Вот так просто мы создали интерактивный график с данными. Смотрите так же другие интерактивные графики на этой странице

Источник

Графики и диаграммы

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

Набор возможных графиков доступен на этой странице. Для каждого графика есть множество параметров, которые позволяют настроить всё по своему вкусу: цвета, положение, заголовки, анимацию и многое другое. Можно обойтись и минимальным набором, если нет желания вдаваться в эти тонкости или когда полностью устраивает стандартный вид графика.

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

Круговая диаграмма

Такая диаграмма напоминает торт, разрезанный на разного размера куски. Общая сумма всех частей составляет 100%, части делят круг пропорционально своим значениям.

В примере 1 показан код для отображения состава воздуха в виде круговой диаграммы.

Пример 1. Круговая диаграмма

Результат примера показан на рис. 1.

Рис. 1. Вид круговой диаграммы

В том месте документа, куда мы добавляем диаграмму, вставляем следующий код.

Ширину и высоту диаграммы задаём через стили и добавляем идентификатор для работы скрипта. Этот же идентификатор должен быть указан в document.getElementById .

Параметры диаграммы состоят из двух блоков: собственно данные для отображения (переменная data ) и настройки (переменная options ). Первая строка в data задаёт названия последующих колонок и хотя она никак не выводится, без неё отображение происходит некорректно. В options пишется заголовок диаграммы, также можно указать трёхмерность и другие настройки, все они являются необязательными и если не заданы, то принимаются по умолчанию.

Диаграмма получается интерактивной, её части подсвечиваются если навести на них курсор или на легенду.

Примеры, список параметров и описание круговой диаграммы доступны по этому адресу: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

Гистограмма

Гистограмма — это столбчатая диаграмма, которая удобна для сравнения разных значений между собой. В качестве примера возьмём добычу нефти в XIX веке в России и США (рис. 2). На оси абсцисс (горизонтальная ось) нанесены годы, на оси ординат (вертикальная ось) — добыча нефти в тысячах тонн. Высота прямоугольников соответствует указанному значению.

Принцип создания этого типа диаграммы аналогичен предыдущему — добавляем тег , связываем его со скриптом, в котором хранятся данные для графика и параметры отображения (пример 2).

Для начала добавляем тег и указываем ему желаемую ширину и высоту с помощью стилей. Также важен идентификатор через который скрипт будет вставлять выбранный график в элемент . Сам скрипт в сравнении с предыдущим примером сохраняет свою структуру и состоит из двух редактируемых частей — собственно данные для отображения на графике и различные его настройки. Через параметры hAxis и vAxis добавим для наглядности заголовки осей.

Резюме

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

Сами графики выводятся достаточно оперативно, к тому же вызываемые файлы при первой загрузке кэшируются, поэтому последующее отображение графиков на сайте происходит быстрее. Поддерживаются все браузеры, включая старые версии Internet Explorer.

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

Источник

Круговая диаграмма на чистом CSS

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

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

О создании таких компонентов вы найдете множество статей. Но диаграммы в них обычно делаются либо на основе SVG, либо с применением большого числа HTML-элементов.

В этой статье я расскажу, как создать круговую диаграмму, используя CSS и всего один HTML-элемент.

Ниже, в CodePen, можно посмотреть, что мы будем создавать:

See the Pen CSS only pie chart by Temani Afif (@t_afif) on CodePen.

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

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

Я знаю, что на первый взгляд код может показаться немного сложным, но после прочтения пояснений вы сможете уверенно создавать свои собственные круговые диаграммы.

Структура HTML для круговой диаграммы

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

Мы также добавляем CSS-переменные в качестве встроенных стилей.

• —p : Эта переменная должна содержать процентное значение в виде числа (без знака %). Значение должно быть таким же, как в содержимом .
• —b : Эта переменная определяет толщину границы.
• —c : Эта переменная определяет основной цвет.

Для целей этой статьи, чтобы код был покороче, я использую однобуквенные переменные. В продакшен-среде, конечно, нужно использовать более осмысленные имена. Например, —percentage , —border-thickness и —main-color .

CSS для круговой диаграммы

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

(Прим. перев.: «pie» в коде — от англ. «Pie Chart» — «круговая диаграмма»).

Я определяю наш элемент как inline-grid , чтобы легко разместить содержимое в середине при помощи place-content: center . Чтобы наш элемент всегда оставался квадратным, мы используем aspect-ratio: 1 . Также можно использовать height: var(—w) , но всегда полезно изучать и применять новые CSS-свойства.

Возможно, вам любопытно, почему для определения ширины я использую переменную, а не просто прописываю width: 150px . В будущем мне понадобится это значение, поэтому я определяю его при помощи переменной.

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

Переходим к более интересной части — основной форме нашего компонента. Для этого мы используем псевдоэлемент со следующими стилями:

Псевдоэлемент, имеющий position: absolute , покрывает всю площадь благодаря inset: 0 . Да, еще одно новое CSS-свойство. Это сокращенный вариант для top , right , bottom и left (почитать подробнее можно на MDN Web Docs).

Затем мы превращаем наш псевдоэлемент в круг ( border-radius: 50% ) и применяем conic-gradient() . Обратите внимание на использование CSS-переменных, которые мы определили в качестве встроенных стилей ( —c для цвета и —p для процентного значения).

Пока что мы получаем вот такой результат:

Мы подбираемся к желаемой цели! conic-gradient() дает нам двуцветный градиент. Основной цвет — от 0% до p%, а остальная часть имеет прозрачный цвет (со значением #0000).

Чтобы оставить только границу, мы прячем середину круга при помощи mask . На этот раз мы используем radial-gradient() :

radial-gradient(farthest-side,red calc(99% - var(--b)),blue calc(100% - var(--b)))

В качестве фона это дает нам следующий результат:

Обратите внимание на использование переменной —b , которая определяет толщину границы (на рисунке показано синим цветом).

Теперь представьте, что синяя часть остается, а красная становится невидимой. Это мы и получаем, применяя тот же градиент со свойством mask :

И вот, мы построили нашу круговую диаграмму на одном элементе и нескольких строках CSS-кода.

Как добавить скругление краев

Я добавлю дополнительный градиентный слой для первого (верхнего) конца и псевдоэлемент для второго. Вот иллюстрация этого приема:

Код для скругления верхнего конца:

Помимо conic-gradient() , сверху мы добавляем radial-gradient() . Размер равен толщине границы (определяется при помощи —b ).

Код для скругления второго конца:

Свойство inset устанавливает размер псевдоэлемента равным —b . Помните, что это сокращенный вариант записи для top , right , bottom и left .

это значит, что с каждой стороны мы сдвигаемся к центру, за минусом отступа в b/2 . Таким образом у нас получается ширина, равная 2*b/2 = b . Та же логика применяется к высоте.

Теперь нам нужно правильно разместить наш элемент. Для этого мы используем свойство transform . Изначально элемент расположен по центру, так что нам нужно его повернуть. Имея процентное значение, мы применяем тройное правило, чтобы получить угол:

angle = percentage*360deg/100

Затем мы выполняем смещение. Здесь нам понадобится ширина, потому что смещение мы делаем на половину ширины ( w/2 ).

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

После этого мы раскрашиваем псевдоэлемент основным цветом — и все готово. Мы получили круговую диаграмму со скругленными концами.

Как анимировать круговую диаграмму

Статическая диаграмма это, конечно, хорошо, но анимированная лучше! Для этого мы будем анимировать процентное значение —p от 0 до определенного значения. По умолчанию CSS-переменные не анимируются, но благодаря новой фиче @property это стало возможным.

@property --p< syntax: ''; inherits: true; initial-value: 0; >

Обратите внимание: нам нужно указать только значение from . По умолчанию браузер сделает значение to равным определенному нами значению (

).

И, наконец, мы вызываем анимацию. При желании можете определить продолжительность и задержку.

К сожалению, эта техника не имеет широкой поддержки. Вы можете протестировать ее в браузерах на основе Chromium (Chrome и Edge), но в Firefox и Safari фокус не сработает. Чтобы подробнее узнать о поддержке, откройте Can I Use.

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

See the Pen CSS only pie chart by Temani Afif (@t_afif) on CodePen.

Источник