JavaScript Donut Chart

{"draftJsState":{"blocks":[{"data":{"image":{"id":"64ff83734ebfad2e30cbeddc"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ojo"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"f6uma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Визуализация данных — процесс не только познавательный, но и довольно забавный. Один из самых простых и увлекательных способов визуализации данных — создание кольцевой диаграммы. Я покажу вам, как без особых усилий построить интерактивную диаграмму на JavaScript.","type":"unstyled","key":"f8mfj"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":18,"offset":410}],"inlineStyleRanges":[],"text":"Кольцевая диаграмма, названная так из-за сходства с кольцом, — это круговая диаграмма с отверстием в центре. Она удобна для представления категорийных данных с умеренным количеством категорий, где каждый сектор представляет собой процент от целого. В этом руководстве мы применим технику построения кольцевых диаграмм для визуализации количества побед, одержанных на турнирах Большого шлема легендой тенниса Роджером Федерером. Таким образом, у вас будет реальный пример для практики и совершенствования своих навыков.","type":"unstyled","key":"avlj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я буду сопровождать вас на каждом этапе, обеспечивая непрерывность обучения. В итоге вы приобретете все навыки и знания, необходимые для создания на JS персонализированных кольцевых диаграмм. Итак, отправимся прямо сейчас в это увлекательное путешествие!","type":"unstyled","key":"2fd9f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Предварительный обзор кольцевой диаграммы","type":"header-three","key":"6jka4"},{"data":{"image":{"id":"64ff83a5cf59fe27f028156b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот обзор кольцевой диаграммы, которую мы собирается построить (она будет интерактивной)","type":"atomic:image","key":"1tjce"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание кольцевой диаграммы на JavaScript в четыре этапа","type":"header-three","key":"72ad4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Посмотрим, как быстро и легко создать визуально красивую и функциональную кольцевую диаграмму на JavaScript. Этот процесс можно разделить на четыре этапа:","type":"unstyled","key":"39p3e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание базовой HTML-страницы.","type":"ordered-list-item","key":"92j4n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Включение необходимых JavaScript-файлов.","type":"ordered-list-item","key":"ctjue"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавление данных.","type":"ordered-list-item","key":"2oahm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Написание JS-кода.","type":"ordered-list-item","key":"8mmvo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"1. Создание базовой HTML-страницы","type":"header-three","key":"c6i3o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для начала создадим базовую HTML-страницу с элементом

для размещения кольцевой диаграммы. Дадим ей идентификатор. Установим ширину и высоту на 100% без полей и отступов, чтобы диаграмма отображалась во весь экран.","type":"unstyled","key":"elgjn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n \n JavaScript Donut Chart\n \n \n \n

\n \n","type":"blockquote","key":"ajepv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":0,"style":"BOLD"}],"text":"2. Включение необходимых JavaScript-файлов","type":"header-three","key":"10vcf"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":37,"offset":0}],"inlineStyleRanges":[],"text":"JS-библиотеки для визуализации данных предоставляют готовые к использованию функции, которые упрощают разработку диаграмм даже тем, кто не обладает продвинутыми техническими навыками. Несмотря на большое количество JS-библиотек, основные принципы их работы одинаковы.","type":"unstyled","key":"56k3"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":8,"offset":69}],"inlineStyleRanges":[],"text":"В этом руководстве мы будем использовать JS-библиотеку под названием AnyChart. Это простой и гибкий инструмент визуализации данных. Чтобы построить кольцевую диаграмму на JavaScript, нужно включить два скрипта в раздел HTML-страницы.","type":"unstyled","key":"6il1o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n \n JavaScript Donut Chart\n \n \n \n \n \n

\n \n \n","type":"blockquote","key":"biod7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"3. Добавление данных","type":"header-three","key":"ajcke"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, посмотрим на состав титулов Роджера Федерера в турнирах Большого шлема.","type":"unstyled","key":"agcl5"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":9,"offset":26}],"inlineStyleRanges":[],"text":"Добавим данные (взятые из Википедии) в виде простого массива:","type":"unstyled","key":"15uo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var data = anychart.data.set([\n [\"Wimbledon\", 8],\n [\"Australian Open\", 6],\n [\"US Open\", 5],\n [\"Roland Garros\", 1]\n]);","type":"blockquote","key":"19kjd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"4. Написание JS-кода","type":"header-three","key":"53c8i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А вот и самая интересная часть: визуализация данных путем создания кольцевой диаграммы с помощью всего нескольких строк кода JavaScript.","type":"unstyled","key":"dj863"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сперва добавим функцию anychart.onDocumentReady(), которая обеспечивает готовность веб-страницы к выполнению кода. Остальной JS-код должен быть размещен внутри этой функции. Начнем с задания данных:","type":"unstyled","key":"3hf8t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"anychart.onDocumentReady(function () {\n var data = anychart.data.set([\n [\"Wimbledon\", 8],\n [\"Australian Open\", 6],\n [\"U.S. Open\", 5],\n [\"French Open\", 1]\n ]);\n});","type":"blockquote","key":"1tc1d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь в той же функции создадим круговую диаграмму и определим внутренний радиус, чтобы придать ей вид кольца.","type":"unstyled","key":"39qaa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var chart = anychart.pie(data)\n .innerRadius('50%');","type":"blockquote","key":"diluf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дадим заголовок визуализации. Затем установим контейнер и создадим диаграмму.","type":"unstyled","key":"8kpqk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"chart.title('Grand Slam Titles Won by Roger Federer');\nchart.container('container');\nchart.draw();","type":"blockquote","key":"4f2j6"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":10,"offset":59}],"inlineStyleRanges":[],"text":"Вы можете посмотреть интерактивную версию со всем кодом на playground и даже нажать на секторы, чтобы увидеть анимацию. Также обратите внимание на автоматически сгенерированную легенду. Просто щелкните по ней!","type":"unstyled","key":"33mhb"},{"data":{"image":{"id":"64ff83a58b817f3cfd871a20"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"bgl75"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n \n JavaScript Donut Chart\n \n \n \n \n \n

\n \n \n","type":"blockquote","key":"7gvkp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь, когда у нас есть кольцевая диаграмма, сделаем ее еще круче и привлекательнее. Вот как можно настроить диаграмму.","type":"unstyled","key":"fhfui"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Настройка кольцевой диаграммы","type":"header-three","key":"7gl0v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При работе с JavaScript-библиотеками визуализации данных можно быстро создавать диаграммы и гибко настраивать их по своему вкусу. В случае с кольцевой диаграммой доступны многочисленные опции для повышения уровня ее эстетической привлекательности и информативности. В следующем разделе рассмотрим различные варианты настройки. Они помогут создавать визуально впечатляющие и насыщенные информацией JS-диаграммы.","type":"unstyled","key":"eo55e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Изменение цветовой палитры","type":"header-three","key":"1488l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы добавить визуальной целостности, раскрасим секторы диаграммы в соответствии с цветами логотипов соответствующих турниров Большого шлема. Этого можно достичь, определив необходимые цвета и установив цветовую палитру диаграммы.","type":"unstyled","key":"2e16p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// создаем цветовую палитру \nvar palette = anychart.palettes.distinctColors();\n \n// добавляем цвета в соответствии с брендами \npalette.items([\n { color: \"#563783\" },\n { color: \"#1b8cca\" },\n { color: \"#022789\" },\n { color: \"#d35220\" }\n]);\n\n// создаем экземпляр кольцевой диаграммы с переданными данными \nvar chart = anychart\n .pie(data)\n // устанавливаем внутренний радиус для создания кольцевой диаграммы \n .innerRadius(\"50%\")\n // настраиваем цветовую палитру \n .palette(palette);","type":"blockquote","key":"at4pn"},{"data":{"image":{"id":"64ff83a593563d430043910a"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"54tr9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Установка меток","type":"header-three","key":"b16cm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поскольку в этой кольцевой диаграмме всего четыре категории, можно добавить название каждого турнира Большого шлема прямо на соответствующий сектор. Мы также можем отключить автоматическую легенду, поскольку в данной ситуации она не нужна.","type":"unstyled","key":"eo26k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"chart.labels().format(\"{%x}: {%y}\").fontSize(14);\nchart.legend(false);","type":"blockquote","key":"brm37"},{"data":{"image":{"id":"64ff83a563d593510e6a7aa9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7bk0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Изменение вида сектора при клике","type":"header-three","key":"6b91f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В качестве дополнительной настройки изменим внешний вид сектора, на который кликаем мышью. Вместо поведения по умолчанию, сделаем так, чтобы при клике все секторы выглядели одинаково.","type":"unstyled","key":"5svsm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// установить заливку при выборе\nchart.selected().fill(\"#007247\");\n \n// настройка контура при выборе\nchart\n .selected()\n .outline()\n .fill(function () {\n return anychart.color.lighten(\"#007247\", 0.55);\n });","type":"blockquote","key":"2hu04"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Благодаря этим небольшим, но значимым изменениям, кольцевая диаграмма стала выглядеть более персонализированной.","type":"unstyled","key":"63ks4"},{"data":{"image":{"id":"64ff83a5ffabb222af1e2770"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7a1vo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"BOLD"}],"text":"Добавление контента в центр диаграммы","type":"header-three","key":"59ahg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для достижения максимальной информативности кольцевой диаграммы можно использовать ее центральную часть, которая обычно пуста. Добавим дополнительную информацию, поместив в центр отдельную метку. Воспользуемся HTML для стилизации текста, установим высоту и ширину на 100% и разместим контент в центре диаграммы.","type":"unstyled","key":"7ct0a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// создание отдельной метки \nvar label = anychart.standalones.label();\n\nlabel\n .useHtml(true)\n .text(\n 'Total titles: 20' +\n '

Total finals: 41'\n )\n .position(\"center\")\n .anchor(\"center\")\n .hAlign(\"center\")\n .vAlign(\"middle\");\n\nlabel.width(\"100%\");\nlabel.height(\"100%\");\n\n// устанавливаем метку как контент в центре \nchart.center().content(label);","type":"blockquote","key":"89pd9"},{"data":{"image":{"id":"64ff83a5a49fb24f3372fdea"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"27vut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"BOLD"}],"text":"Улучшение всплывающей подсказки и заголовка","type":"header-three","key":"3pgq3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В качестве заключительных шагов оптимизируем всплывающую подсказку кольцевой диаграммы, включив процентное значение вместе с названием турнира Большого шлема на метке.","type":"unstyled","key":"9d0mr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"chart.tooltip().format(\"Percent of total wins: {%PercentValue}%\");","type":"blockquote","key":"9uslg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Улучшим заголовок диаграммы и добавим подзаголовок, включив HTML-форматирование.","type":"unstyled","key":"aojn7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"chart\n .title()\n .enabled(true)\n .useHtml(true)\n .text(\n 'Grand Slam Titles Won by Roger Federer' +\n '
The French Open (Roland-Garros) is apparently his least favorite major'\n );","type":"blockquote","key":"5mji2"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":9,"offset":188}],"inlineStyleRanges":[],"text":"Мы создали кольцевую JS-диаграмму, отвечающую всем современным требованиям! Вы можете найти финальную версию кода для этого примера визуализации данных ниже и поэкспериментировать с ним в песочнице.","type":"unstyled","key":"2p30h"},{"data":{"image":{"id":"64ff83a71605e653fe29bc75"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6gpca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n \n JavaScript Donut Chart\n \n \n \n \n \n

\n \n \n","type":"blockquote","key":"44oas"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-three","key":"c5r57"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание и настройка кольцевой диаграммы в JS не требуют особых усилий. Несмотря на свою простоту, кольцевые диаграммы широко используются, что делает их отличным вариантом для новичка, приступающего к освоению визуализации данных.","type":"unstyled","key":"f2hg4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"aavmn"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":32,"offset":0}],"inlineStyleRanges":[],"text":"10 ключевых концепций JavaScript","type":"unordered-list-item","key":"ee60f"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":45,"offset":0}],"inlineStyleRanges":[],"text":"Как создать цифровые часы с помощью Moment.js","type":"unordered-list-item","key":"8m1nj"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":60,"offset":0}],"inlineStyleRanges":[],"text":"Кто есть кто: обратные вызовы, промисы и асинхронные функции","type":"unordered-list-item","key":"3kogu"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":8,"offset":14},{"key":11,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"9d3g8"},{"data":{},"depth":0,"entityRanges":[{"key":12,"length":14,"offset":15},{"key":13,"length":38,"offset":31}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Shachee Swadia: Creating a Donut Chart with JavaScript","type":"unstyled","key":"bjnk4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"cmIRk2c93P0MZav8KkPf"}],"entityMap":{"11":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"12":{"data":{"href":"https://visualscribbler.medium.com/","url":"https://visualscribbler.medium.com/"},"mutability":"MUTABLE","type":"LINK"},"13":{"data":{"href":"https://levelup.gitconnected.com/creating-a-donut-chart-with-javascript-ea50c22596c4","url":"https://levelup.gitconnected.com/creating-a-donut-chart-with-javascript-ea50c22596c4"},"mutability":"MUTABLE","type":"LINK"},"0":{"data":{"url":"https://nuancesprog.ru/p/18750/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://en.wikipedia.org/wiki/Roger_Federer","url":"https://en.wikipedia.org/wiki/Roger_Federer"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://en.wikipedia.org/wiki/Comparison_of_JavaScript_charting_libraries","url":"https://en.wikipedia.org/wiki/Comparison_of_JavaScript_charting_libraries"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://www.anychart.com/","url":"https://www.anychart.com/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://en.wikipedia.org/wiki/Roger_Federer","url":"https://en.wikipedia.org/wiki/Roger_Federer"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://playground.anychart.com/sLOWpq2o","url":"https://playground.anychart.com/sLOWpq2o"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://playground.anychart.com/ApkP0sjX","url":"https://playground.anychart.com/ApkP0sjX"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://nuancesprog.ru/p/18642/","url":"https://nuancesprog.ru/p/18642/"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://nuancesprog.ru/p/14787/","url":"https://nuancesprog.ru/p/14787/"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://nuancesprog.ru/p/15689/","url":"https://nuancesprog.ru/p/15689/"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://t.me/nuancesprog","url":"https://t.me/nuancesprog"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}