В окружающем нас мире данных диаграммы играют решающую роль, помогая нам более эффективно исследовать и понимать данные. Одним из мощных методов визуализации является диаграмма солнечных лучей, которая позволяет нам представлять иерархические наборы данных, визуально обеспечивая понимание сложных композиций. В этом уроке я покажу вам, как без особых усилий создавать собственные потрясающие интерактивные диаграммы солнечных лучей с помощью JavaScript.
Мы отправимся в увлекательное путешествие на примере данных об оскароносных актерах и актрисах из разных стран мира. Наша диаграмма солнечных лучей на основе JS прольет свет на достижения тех, кто родился за пределами Соединенных Штатов, представляя богатое разнообразие их происхождения.
Приготовьтесь раскрыть секреты разработки диаграммы солнечных лучей JavaScript, поскольку я буду вести вас шаг за шагом. Вместе мы научимся без особых усилий воплощать данные в жизнь, создавая эту завораживающую визуализацию, которая привлекает и информирует. Давайте погрузимся и откроем для себя увлекательный мир диаграммы солнечных лучей!
Что такое диаграмма солнечных лучей?
Солнечная диаграмма, также известная как радиальная древовидная карта или многоуровневая круговая диаграмма, представляет собой мощный инструмент визуализации, используемый для представления иерархических наборов данных. Он демонстрирует данные в круговом макете с вложенными кольцами, которые отображают разные уровни иерархии. Самое внутреннее кольцо представляет верхний уровень, а внешние кольца соответствуют подкатегориям.
Каждое кольцо разделено на срезы, каждый из которых показывает определенную точку данных в соответствующей категории. Размер срезов иногда может указывать значения, связанные с точками данных. Пользователи могут перейти к более подробной информации и более глубокому пониманию, щелкнув определенный уровень иерархии.
Диаграмма солнечных лучей предлагает интуитивно понятный и визуально привлекательный способ анализа иерархических данных, позволяя пользователям легко понять отношения и пропорции между различными категориями и подкатегориями. Его интерактивный характер облегчает исследование и открытие, что делает его ценным инструментом для визуального анализа данных.
Предварительный просмотр диаграммы Sunburst
Посмотрите на грандиозный финал этого урока, великолепную интерактивную диаграмму солнечных лучей на основе JavaScript, которую мы создадим вместе шаг за шагом.
Давайте не будем больше терять время и сразу приступим к построению графиков!
Создание базовой диаграммы солнечных лучей JS
Концепция интерактивной диаграммы солнечных лучей поначалу может показаться сложной и трудоемкой, когда дело доходит до разработки этой визуализации данных, но не бойтесь! Разобьем его на четыре простых шага. Я проведу вас через каждый, и вы скоро поймете, что это легкий ветерок.
- Создать веб-страницу в HTML
- Включите необходимые файлы JavaScript
- Добавьте данные
- Напишите код JavaScript
1. Создайте веб-страницу в HTML
Давайте начнем наше приключение с диаграммой солнечных лучей, создав в качестве основы простую HTML-страницу. Мы начнем с установки заголовка страницы на «JavaScript Sunburst Chart».
Чтобы содержать диаграмму, мы добавим блочный элемент HTML как <div>. Давайте дадим этому div атрибут id «контейнер», чтобы мы могли легко ссылаться на него позже в нашем путешествии.
Затем давайте добавим немного стиля к нашей диаграмме. Внутри блока <style> мы включим несколько правил CSS, которые будут красиво отображать нашу диаграмму солнечных лучей на весь экран. Мы установим свойства ширины и высоты на 100%, чтобы гарантировать, что он заполняет все доступное пространство. Кроме того, мы установим для полей и отступов значение 0, чтобы наша диаграмма выделялась без каких-либо ненужных границ. Помните, что эти первоначальные правила являются лишь отправной точкой, и вы можете настроить их по своему усмотрению!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Sunburst Chart</title>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
Когда наша базовая HTML-страница настроена и наш контейнер диаграммы готов принять визуальную магию, пришло время двигаться вперед и раскрыть секреты создания увлекательной диаграммы солнечных лучей с помощью JavaScript. Давайте продолжим наше путешествие и воплотим наши данные в жизнь самым потрясающим способом!
2. Включите необходимые файлы JavaScript
Теперь пришло время использовать возможности JavaScript на нашей HTML-странице, включив необходимые файлы сценариев. В разделе <head> нашей HTML-страницы мы позаботимся о том, чтобы эти файлы заняли свое законное место. У нас есть несколько вариантов для достижения этого. Один из вариантов — загрузить необходимые файлы сценариев и включить их локально в наш проект. В этом руководстве мы используем другой подход для повышения эффективности и включаем сценарии непосредственно из CDN («сеть доставки контента»).
Существует не так много библиотек JavaScript для построения диаграмм, которые изначально поддерживают диаграммы солнечных лучей. Одним из них является AnyChart, который имеет тщательную документацию для его обширных возможностей визуализации данных и галерею, полную готовых к использованию примеров диаграмм, поэтому я выбрал его для демонстрации разработки диаграммы солнечных лучей в этом руководстве. .
AnyChart может похвастаться модульной структурой, которая позволяет нам беспрепятственно подключать только определенные типы диаграмм и функции по мере необходимости, оптимизируя размер выполняемого кода JavaScript и обеспечивая плавную работу. Чтобы наша диаграмма солнечных лучей была ослепительной, нам нужно добавить два основных модуля: модуль Core, который образует основу библиотеки, и модуль Sunburst, который позволяет нам создавать увлекательные визуализации солнечных лучей.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Sunburst Chart</title>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-sunburst.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// All the code for the JS sunburst chart will come here
</script>
</body>
</html>
Теперь, когда файлы JavaScript установлены, наша HTML-страница оснащена необходимыми инструментами для создания графиков. Давайте двигаться вперед и раскрыть секреты создания великолепной диаграммы солнечных лучей!
3. Добавьте данные
Фантастика! Давайте глубже погрузимся в мир оскароносных актеров и актрис и узнаем об их разнообразном происхождении. Наше внимание будет сосредоточено на визуализации данных, конкретно относящихся к неамериканцам, получившим престижную премию в четырех основных категориях актерского мастерства с момента создания премии Оскар:
- Лучший актер
- Лучшая женская роль
- Лучший актер второго плана
- Лучшая женская роль второго плана
Я получил набор данных от Вандеру и обновил его, используя последние данные из официальной Базы данных наград Академии и Википедии. Чтобы сделать его пригодным для нашей диаграммы солнечных лучей JavaScript, я структурировал данные в массив объектов, где каждый объект содержит важные детали, такие как имя, значение и дочерние элементы.
Для начала мы начнем с данных из одной страны для простоты и ясности.
var data = [
{
name: "World", value: 115, children: [
{
name: "Europe", value: 87, children: [
{
name: "England", value: 53, children: [
{ name: "Alec Guinness", value: 1 },
{ name: "Ben Kingsley", value: 1 },
{ name: "Charles Laughton", value: 2 },
{ name: "Colin Firth", value: 1 },
{ name: "Daniel Day-Lewis", value: 3 },
{ name: "Daniel Kaluuya", value: 1 },
{ name: "David Niven", value: 1 },
{ name: "Donald Crisp", value: 1 },
{ name: "Eddie Redmayne", value: 1 },
{ name: "Edmund Gwenn", value: 1 },
{ name: "Elizabeth Taylor", value: 2 },
{ name: "Emma Thompson", value: 1 },
{ name: "Gary Oldman", value: 1 },
{ name: "George Arliss", value: 2 },
{ name: "Glenda Jackson", value: 2 },
{ name: "Greer Garson", value: 1 },
{ name: "Helen Mirren", value: 1 },
{ name: "Jeremy Irons", value: 1 },
{ name: "Jessica Tandy", value: 1 },
{ name: "Jim Broadbent", value: 1 },
{ name: "John Gielgud", value: 1 },
{ name: "John Mills", value: 1 },
{ name: "Judi Dench", value: 1 },
{ name: "Julie Andrews", value: 1 },
{ name: "Kate Winslet", value: 1 },
{ name: "Laurence Olivier", value: 1 },
{ name: "Maggie Smith", value: 3 },
{ name: "Margaret Rutherford", value: 1 },
{ name: "Mark Rylance", value: 1 },
{ name: "Michael Caine", value: 2 },
{ name: "Olivia Colman", value: 1 },
{ name: "Paul Scofield", value: 1 },
{ name: "Peggy Ashcroft", value: 1 },
{ name: "Peter Finch", value: 1 },
{ name: "Peter Ustinov", value: 2 },
{ name: "Rachel Weisz", value: 1 },
{ name: "Rex Harrison", value: 1 },
{ name: "Robert Donat", value: 1 },
{ name: "Ronald Colman", value: 1 },
{ name: "Tilda Swinton", value: 1 },
{ name: "Vanessa Redgrave", value: 1 },
{ name: "Victor McLaglen", value: 1 },
{ name: "Wendy Hiller", value: 1 }
]
}
]
}
]
}
];
По мере продвижения мы будем постепенно расширять нашу визуализацию, чтобы включить данные из всех стран. Так что будьте уверены, скоро у нас будет полное представление о невероятных достижениях оскароносных актеров и актрис со всего мира.
Теперь давайте воспользуемся мощью JavaScript, чтобы вдохнуть жизнь в наш шедевр визуализации данных!
4. Напишите код JS
Чтобы начать наше путешествие в мир диаграмм «солнечные лучи» на основе JavaScript, мы позаботимся о том, чтобы наш код показал себя, как только сцена будет подготовлена, с помощью эффектной функции anychart.onDocumentReady().
<script>
anychart.onDocumentReady(function () {
// The JS Sunburst Chart's code will be written here.
}
</script>
Теперь давайте введем данные и подготовим сцену, представив их в виде дерева.
var chart = anychart.sunburst(data, "as-tree");
Мы также должны добавить заголовок диаграммы, чтобы сразу было ясно, что именно будет показано на следующей диаграмме. Для размещения нашего шедевра мы выделим ему специальный контейнер, тот самый, который мы обозначили на разогреве.
chart.title("Non-U.S. Born Oscar Winners for Acting");
chart.container("container");
Сцена готова, свет приглушен, и пришло время нашей графике занять центральное место! Давайте нарисуем нашу диаграмму солнечных лучей, превратив данные в завораживающее визуальное представление.
Ознакомьтесь с выводом и приготовьтесь удивиться, изучая интерактивную функцию детализации нашей диаграммы солнечных лучей JavaScript (HTML5)! Щелкните здесь, щелкните здесь и станьте свидетелем динамической трансформации прямо на ваших глазах. Вы можете увидеть его прямо ниже или посетить Игровую площадку AnyChart, где полноценный редактор кода ждет вашего творческого прикосновения.
Но подождите, есть еще! В следующем разделе мы раскроем наши творческие способности и углубимся в советы и рекомендации по настройке, которые поднимут вашу диаграмму на новый уровень.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Sunburst Chart</title>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-sunburst.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function(){
// create the data
var data = [
{
name: "World", value: 115, children: [
{
name: "Europe", value: 87, children: [
{
name: "England", value: 53, children: [
{ name: "Alec Guinness", value: 1 },
{ name: "Ben Kingsley", value: 1 },
{ name: "Charles Laughton", value: 2 },
{ name: "Colin Firth", value: 1 },
{ name: "Daniel Day-Lewis", value: 3 },
{ name: "Daniel Kaluuya", value: 1 },
{ name: "David Niven", value: 1 },
{ name: "Donald Crisp", value: 1 },
{ name: "Eddie Redmayne", value: 1 },
{ name: "Edmund Gwenn", value: 1 },
{ name: "Elizabeth Taylor", value: 2 },
{ name: "Emma Thompson", value: 1 },
{ name: "Gary Oldman", value: 1 },
{ name: "George Arliss", value: 2 },
{ name: "Glenda Jackson", value: 2 },
{ name: "Greer Garson", value: 1 },
{ name: "Helen Mirren", value: 1 },
{ name: "Jeremy Irons", value: 1 },
{ name: "Jessica Tandy", value: 1 },
{ name: "Jim Broadbent", value: 1 },
{ name: "John Gielgud", value: 1 },
{ name: "John Mills", value: 1 },
{ name: "Judi Dench", value: 1 },
{ name: "Julie Andrews", value: 1 },
{ name: "Kate Winslet", value: 1 },
{ name: "Laurence Olivier", value: 1 },
{ name: "Maggie Smith", value: 3 },
{ name: "Margaret Rutherford", value: 1 },
{ name: "Mark Rylance", value: 1 },
{ name: "Michael Caine", value: 2 },
{ name: "Olivia Colman", value: 1 },
{ name: "Paul Scofield", value: 1 },
{ name: "Peggy Ashcroft", value: 1 },
{ name: "Peter Finch", value: 1 },
{ name: "Peter Ustinov", value: 2 },
{ name: "Rachel Weisz", value: 1 },
{ name: "Rex Harrison", value: 1 },
{ name: "Robert Donat", value: 1 },
{ name: "Ronald Colman", value: 1 },
{ name: "Tilda Swinton", value: 1 },
{ name: "Vanessa Redgrave", value: 1 },
{ name: "Victor McLaglen", value: 1 },
{ name: "Wendy Hiller", value: 1 }
]
},
{
name: "Austria", value: 3, children: [
{ name: "Christoph Waltz", value: 1 },
{ name: "Joseph Schildkraut", value: 1 },
{ name: "Maximillian Schell", value: 1 }
]
},
{
name: "Wales", value: 6, children: [
{ name: "Ray Milland", value: 1 },
{ name: "Hugh Griffith", value: 1 },
{ name: "Catherine Zeta-Jones", value: 2 },
{ name: "Anthony Hopkins", value: 2 }
]
},
{
name: "France", value: 4, children: [
{ name: "Claudette Colbert", value: 1 },
{ name: "Jean Dujardin", value: 1 },
{ name: "Juliette Binoche", value: 1 },
{ name: "Marion Cotillard", value: 1 }
]
},
{
name: "Italy", value: 3, children: [
{ name: "Anna Magnani", value: 1 },
{ name: "Roberto Benigni", value: 1 },
{ name: "Sophia Loren", value: 1 }
]
},
{
name: "Russia", value: 3, children: [
{ name: "George Sanders", value: 1 },
{ name: "Lila Kedrova", value: 1 },
{ name: "Yul Brynner", value: 1 }
]
},
{
name: "Germany", value: 2, children: [
{ name: "Luise Rainier", value: 1 },
{ name: "Simone Signoret", value: 1 }
]
},
{
name: "Ireland", value: 2, children: [
{ name: "Barry Fitzgerald", value: 1 },
{ name: "Brenda Flicker", value: 1 }
]
},
{
name: "Spain", value: 2, children: [
{ name: "Javier Bardem", value: 1 },
{ name: "Penélope Cruz", value: 1 }
]
},
{
name: "Sweden", value: 2, children: [
{ name: "Alicia Vikander", value: 1 },
{ name: "Ingrid Bergman", value: 1 }
]
},
{
name: "Belgium", value: 1, children: [
{ name: "Audrey Hepburn", value: 1 }
]
},
{
name: "Greece", value: 1, children: [
{ name: "Katina Paxinou", value: 1 }
]
},
{
name: "Hungary", value: 1, children: [
{ name: "Paul Lukas", value: 1 }
]
},
{
name: "Romania", value: 1, children: [
{ name: "John Houseman", value: 1 }
]
},
{
name: "Scotland", value: 1, children: [
{ name: "Sean Connery", value: 1 }
]
},
{
name: "Switzerland", value: 1, children: [
{ name: "Emil Jannings", value: 1 }
]
},
{
name: "Ukraine", value: 1, children: [
{ name: "Paul Muni", value: 1 }
]
}
]
},
{
name: "America", value: 14, children: [
{
name: "Canada", value: 11, children: [
{ name: "Anna Paquin", value: 1 },
{ name: "Christopher Plumme", value: 2 },
{ name: "Harold Russell", value: 1 },
{ name: "Marie Dressler", value: 2 },
{ name: "Mary Pickford", value: 2 },
{ name: "Norma Shearer", value: 2 },
{ name: "Walter Huston", value: 1 }
]
},
{
name: "Mexico", value: 3, children: [
{ name: "Anthony Quinn", value: 2 },
{ name: "Lupita Nyong’o", value: 1 }
]
}
]
},
{
name: "Asia", value: 10, children: [
{
name: "Japan", value: 4, children: [
{ name: "Joan Fontaine", value: 1 },
{ name: "Miyoshi Umeki", value: 1 },
{ name: "Olivia de Havilland", value: 2 }
]
},
{
name: "India", value: 2, children: [
{ name: "Julie Christie", value: 1 },
{ name: "Vivien Leigh", value: 1 }
]
},
{
name: "Cambodia", value: 1, children: [
{ name: "Haing S. Ngor", value: 1 }
]
},
{
name: "Israel", value: 1, children: [
{ name: "Natalie Portman", value: 1 }
]
},
{
name: "Malaysia", value: 1, children: [
{ name: "Michelle Yeoh", value: 1 }
]
},
{
name: "South Korea", value: 1, children: [
{ name: "Youn Yuh-jung", value: 1 }
]
}
]
},
{
name: "Oceania", value: 3, children: [
{
name: "Australia", value: 2, children: [
{ name: "Geoffrey Rush", value: 1 },
{ name: "Heath Ledger", value: 1 }
]
},
{
name: "New Zealand", value: 1, children: [
{ name: "Russell Crowe", value: 1 }
]
}
]
},
{
name: "Africa", value: 1, children: [
{
name: "South Africa", value: 1, children: [
{ name: "Charlize Theron", value: 1 }
]
}
]
}
]
}
];
// create a sunburst chart and set the data
var chart = anychart.sunburst(data, "as-tree");
// set the chart title
chart.title("Non-U.S. Born Oscar Winners for Acting");
// set the container id
chart.container("container");
// initiate drawing the chart
chart.draw();
});
</script>
</body>
</html>
Настройка JS Sunburst Chart
Поздравляем! Вы создали потрясающую диаграмму солнечных лучей с помощью JavaScript! Но зачем останавливаться на достигнутом, если мы можем перейти на новый уровень крутости и интерактивности? Приготовьтесь к некоторым захватывающим и забавным идеям, чтобы еще больше поднять вашу визуализацию. Давайте погрузимся в эти крутые усовершенствования и сделаем эту диаграмму сияющей, как никогда раньше!
1. Улучшите всплывающую подсказку
В настоящее время, когда мы наводим курсор на объект на диаграмме солнечных лучей, всплывающая подсказка отображает только его имя. Но давайте поднимемся на ступеньку выше и сделаем всплывающую подсказку более информативной. Мы отформатируем его, чтобы показать не только название объекта, но и общее количество Оскаров, полученных актерами и актрисами, странами и континентами на каждом уровне.
chart.tooltip().useHtml(true);
chart.tooltip().format("<h5 style='font-size:14px; font-weight:400; margin: 0.25rem 0;'>{%name}</h5><h5 style='font-size:12px; font-weight:400; margin: 0.25rem 0;'>Total Oscars: {%value}</h5");
Благодаря этому усовершенствованию всплывающая подсказка предоставит исчерпывающий обзор наград, полученных различными объектами на диаграмме.
2. Улучшить окраску
Добавление индивидуальности к вашей работе — всегда отличная идея, и один из способов сделать это — поиграть с цветами. Давайте поднимем нашу диаграмму солнечных лучей на новый уровень, установив пользовательскую цветовую палитру.
Для этого мы воспользуемся функцией palette() и передадим массив цветовых кодов, которые нам нужны для нашей диаграммы. Выбрав соответствующую цветовую схему, мы можем создать визуально привлекательную и гармоничную диаграмму, соответствующую нашему стилю.
chart.palette(['#345E80', '#00838F', '#00BFA5', '#ff6e40', '#d4e157', '#64B5F6']);
Не стесняйтесь экспериментировать с различными цветовыми сочетаниями и дайте волю своему творчеству.
3. Установите родительско-зависимый режим расчета
Получите еще более проницательную визуализацию из нашей диаграммы солнечных лучей на основе JS, давайте изменим режим расчета на «зависящий от родителя», используя функцию calculationMode() для сравнения уровней данных на основе их значений.
При такой настройке размер каждого сегмента на диаграмме соответствует значениям, которые он представляет. По нашему нынешнему мнению, Европа с наибольшим количеством оскароносных актеров и актрис, родившихся за пределами США, находится в центре внимания как самый большой сегмент.
chart.calculationMode("parent-dependent");
4. Настройте ярлыки
Теперь давайте придадим нашей диаграмме чистый и организованный вид, настроив метки. Мы хотим, чтобы отображаемая информация была легко читаемой и визуально привлекательной.
Мы можем начать с сосредоточения внимания на центре верхнего уровня нашей диаграммы солнечных лучей. Это возможность добавить текст, отражающий суть ваших данных. Кроме того, у нас есть возможность настроить различные аспекты этикетки, такие как цвет шрифта, размер, вес и т. д.
// create and configure a label for the center content
let label = anychart.standalones.label();
label.text("Non-U.S. born");
label.width("100%");
label.height("100%");
label.fontColor("#64B5F6");
label.fontSize(12);
label.fontWeight(600);
label.hAlign("center");
label.vAlign("middle");
// set the center content
chart.center().content(label);
// set a space for the center content
chart.innerRadius(50);
// hide the world level
chart.level(0).thickness("0%");
Давайте также уточним формат метки и повернем названия стран:
// configure the label format
chart.labels().format("{%name}");
// apply the radial position
chart.level(2).labels().position("radial");
5. Сортировать по возрастанию
После всех настроек мы можем дополнительно улучшить организацию диаграммы солнечных лучей, установив компоненты в порядке возрастания на основе общего количества Оскаров, выигранных на каждом уровне. Это дает более четкое представление о распределении Оскаров по разным уровням.
chart.sort("asc");
И вуаля! Благодаря этим изменениям мы успешно создали интерактивную, полнофункциональную и визуально привлекательную диаграмму солнечных лучей JavaScript (HTML5). Поистине удивительно видеть, как немного веселья, творчества и несколько строк кода могут привести к такой замечательной визуализации.
Вы можете найти полный код, включая все сделанные нами настройки, ниже. Если вы хотите поэкспериментировать с диаграммой, смело открывайте ее на Игровой площадке AnyChart.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Sunburst Chart</title>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-sunburst.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function(){
// create the data
var data = [
{
name: "World", value: 115, children: [
{
name: "Europe", value: 87, children: [
{
name: "England", value: 53, children: [
{ name: "Alec Guinness", value: 1 },
{ name: "Ben Kingsley", value: 1 },
{ name: "Charles Laughton", value: 2 },
{ name: "Colin Firth", value: 1 },
{ name: "Daniel Day-Lewis", value: 3 },
{ name: "Daniel Kaluuya", value: 1 },
{ name: "David Niven", value: 1 },
{ name: "Donald Crisp", value: 1 },
{ name: "Eddie Redmayne", value: 1 },
{ name: "Edmund Gwenn", value: 1 },
{ name: "Elizabeth Taylor", value: 2 },
{ name: "Emma Thompson", value: 1 },
{ name: "Gary Oldman", value: 1 },
{ name: "George Arliss", value: 2 },
{ name: "Glenda Jackson", value: 2 },
{ name: "Greer Garson", value: 1 },
{ name: "Helen Mirren", value: 1 },
{ name: "Jeremy Irons", value: 1 },
{ name: "Jessica Tandy", value: 1 },
{ name: "Jim Broadbent", value: 1 },
{ name: "John Gielgud", value: 1 },
{ name: "John Mills", value: 1 },
{ name: "Judi Dench", value: 1 },
{ name: "Julie Andrews", value: 1 },
{ name: "Kate Winslet", value: 1 },
{ name: "Laurence Olivier", value: 1 },
{ name: "Maggie Smith", value: 3 },
{ name: "Margaret Rutherford", value: 1 },
{ name: "Mark Rylance", value: 1 },
{ name: "Michael Caine", value: 2 },
{ name: "Olivia Colman", value: 1 },
{ name: "Paul Scofield", value: 1 },
{ name: "Peggy Ashcroft", value: 1 },
{ name: "Peter Finch", value: 1 },
{ name: "Peter Ustinov", value: 2 },
{ name: "Rachel Weisz", value: 1 },
{ name: "Rex Harrison", value: 1 },
{ name: "Robert Donat", value: 1 },
{ name: "Ronald Colman", value: 1 },
{ name: "Tilda Swinton", value: 1 },
{ name: "Vanessa Redgrave", value: 1 },
{ name: "Victor McLaglen", value: 1 },
{ name: "Wendy Hiller", value: 1 }
]
},
{
name: "Austria", value: 3, children: [
{ name: "Christoph Waltz", value: 1 },
{ name: "Joseph Schildkraut", value: 1 },
{ name: "Maximillian Schell", value: 1 }
]
},
{
name: "Wales", value: 6, children: [
{ name: "Ray Milland", value: 1 },
{ name: "Hugh Griffith", value: 1 },
{ name: "Catherine Zeta-Jones", value: 2 },
{ name: "Anthony Hopkins", value: 2 }
]
},
{
name: "France", value: 4, children: [
{ name: "Claudette Colbert", value: 1 },
{ name: "Jean Dujardin", value: 1 },
{ name: "Juliette Binoche", value: 1 },
{ name: "Marion Cotillard", value: 1 }
]
},
{
name: "Italy", value: 3, children: [
{ name: "Anna Magnani", value: 1 },
{ name: "Roberto Benigni", value: 1 },
{ name: "Sophia Loren", value: 1 }
]
},
{
name: "Russia", value: 3, children: [
{ name: "George Sanders", value: 1 },
{ name: "Lila Kedrova", value: 1 },
{ name: "Yul Brynner", value: 1 }
]
},
{
name: "Germany", value: 2, children: [
{ name: "Luise Rainier", value: 1 },
{ name: "Simone Signoret", value: 1 }
]
},
{
name: "Ireland", value: 2, children: [
{ name: "Barry Fitzgerald", value: 1 },
{ name: "Brenda Flicker", value: 1 }
]
},
{
name: "Spain", value: 2, children: [
{ name: "Javier Bardem", value: 1 },
{ name: "Penélope Cruz", value: 1 }
]
},
{
name: "Sweden", value: 2, children: [
{ name: "Alicia Vikander", value: 1 },
{ name: "Ingrid Bergman", value: 1 }
]
},
{
name: "Belgium", value: 1, children: [
{ name: "Audrey Hepburn", value: 1 }
]
},
{
name: "Greece", value: 1, children: [
{ name: "Katina Paxinou", value: 1 }
]
},
{
name: "Hungary", value: 1, children: [
{ name: "Paul Lukas", value: 1 }
]
},
{
name: "Romania", value: 1, children: [
{ name: "John Houseman", value: 1 }
]
},
{
name: "Scotland", value: 1, children: [
{ name: "Sean Connery", value: 1 }
]
},
{
name: "Switzerland", value: 1, children: [
{ name: "Emil Jannings", value: 1 }
]
},
{
name: "Ukraine", value: 1, children: [
{ name: "Paul Muni", value: 1 }
]
}
]
},
{
name: "America", value: 14, children: [
{
name: "Canada", value: 11, children: [
{ name: "Anna Paquin", value: 1 },
{ name: "Christopher Plumme", value: 2 },
{ name: "Harold Russell", value: 1 },
{ name: "Marie Dressler", value: 2 },
{ name: "Mary Pickford", value: 2 },
{ name: "Norma Shearer", value: 2 },
{ name: "Walter Huston", value: 1 }
]
},
{
name: "Mexico", value: 3, children: [
{ name: "Anthony Quinn", value: 2 },
{ name: "Lupita Nyong’o", value: 1 }
]
}
]
},
{
name: "Asia", value: 10, children: [
{
name: "Japan", value: 4, children: [
{ name: "Joan Fontaine", value: 1 },
{ name: "Miyoshi Umeki", value: 1 },
{ name: "Olivia de Havilland", value: 2 }
]
},
{
name: "India", value: 2, children: [
{ name: "Julie Christie", value: 1 },
{ name: "Vivien Leigh", value: 1 }
]
},
{
name: "Cambodia", value: 1, children: [
{ name: "Haing S. Ngor", value: 1 }
]
},
{
name: "Israel", value: 1, children: [
{ name: "Natalie Portman", value: 1 }
]
},
{
name: "Malaysia", value: 1, children: [
{ name: "Michelle Yeoh", value: 1 }
]
},
{
name: "South Korea", value: 1, children: [
{ name: "Youn Yuh-jung", value: 1 }
]
}
]
},
{
name: "Oceania", value: 3, children: [
{
name: "Australia", value: 2, children: [
{ name: "Geoffrey Rush", value: 1 },
{ name: "Heath Ledger", value: 1 }
]
},
{
name: "New Zealand", value: 1, children: [
{ name: "Russell Crowe", value: 1 }
]
}
]
},
{
name: "Africa", value: 1, children: [
{
name: "South Africa", value: 1, children: [
{ name: "Charlize Theron", value: 1 }
]
}
]
}
]
}
];
// create a sunburst chart and set the data
var chart = anychart.sunburst(data, "as-tree");
// set the chart title
chart.title("Non-U.S. Born Oscar Winners for Acting");
// format the tooltip
chart.tooltip().useHtml(true);
chart.tooltip().format("<h5 style='font-size:14px; font-weight:400; margin: 0.25rem 0;'>{%name}</h5><h5 style='font-size:12px; font-weight:400; margin: 0.25rem 0;'>Total Oscars: {%value}</h5");
// set a custom palette
chart.palette(['#345E80', '#00838F', '#00BFA5', '#ff6e40', '#d4e157', '#64B5F6']);
// set the parent-dependent calculation mode
chart.calculationMode("parent-dependent");
// create and configure a label for the center content
let label = anychart.standalones.label();
label.text("Non-U.S. born");
label.width("100%");
label.height("100%");
label.fontColor("#64B5F6");
label.fontSize(12);
label.fontWeight(600);
label.hAlign("center");
label.vAlign("middle");
// set the center content
chart.center().content(label);
// set a space for the center content
chart.innerRadius(50);
// hide the world level
chart.level(0).thickness("0%");
// configure the label format
chart.labels().format("{%name}");
// apply the radial position
chart.level(2).labels().position("radial");
// set the ascending order
chart.sort("asc");
// set the container id
chart.container("container");
// initiate drawing the chart
chart.draw();
});
</script>
</body>
</html>
Заключение
Надеюсь, вам понравился процесс создания завораживающей диаграммы солнечных лучей. Продолжайте изучение с документацией по диаграммам солнечных лучей и ознакомьтесь с галереей примеров диаграмм солнечных лучей для вдохновения.
Теперь, когда вы приобрели навыки для создания таких потрясающих визуализаций, пришло время дать волю своему творчеству. Не бойтесь заходить на неизведанные территории, исследовать разные типы карт и расширять границы возможного.
Если у вас есть какие-либо вопросы или вам нужна дополнительная помощь, не стесняйтесь обращаться к нам. Я здесь, чтобы поддержать вас на вашем пути обучения. Теперь идите вперед и создавайте увлекательные визуализации, которые очаруют вашу аудиторию.
Удачного построения графиков и приятного обучения!
Большое спасибо Авану Шресте за создание этого фантастического руководства по диаграмме Sunburst Chart специально для нашего блога!
Не пропустите другие руководства по построению диаграмм JavaScript в нашем блоге!
Если у вас есть идея для хорошего гостевого поста, давайте ее обсудим!
Первоначально опубликовано на https://www.anychart.com 19 июня 2023 г.
