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

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

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

Добавление круговой диаграммы

Добавление круговой диаграммы состоит из следующих шагов:

1. Подготовка данных
2. Добавление виджета круговой диаграммы

1. Подготовка данных

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

1. Документы Firestore
2. Списки чисел
3. Одиночное значение

1.1 Документы Firestore

Если вы используете Firebase в качестве бэкэнда, вы можете создать коллекцию и добавить список документов. Каждая запись документа может быть использована для отрисовки секций на диаграмме. Поэтому необходимо добавить как минимум два поля (одно с типом данных String и другое с типом данных Integer или Double) в документ. Поле с типом данных String будет использоваться в качестве меток, а поле с типом данных Integer или Double будет использоваться в качестве значений секций.

Ниже показан образец коллекции, который отображает три секции на круговой диаграмме.

warning

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

Вот как данные используются для отрисовки секций на круговой диаграмме:

1.2 Списки чисел

Виджет круговой диаграммы может отображать секции с помощью списка меток и чисел. Вам нужно как минимум два различных списка с типом данных String и Integer или Double. Один список хранит список меток, а другой хранит список значений секций.

к сведению

Переменная может быть переменной состояния приложения или переменной вывода действия вызова API.

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

warning

Количество значений секций должно соответствовать количеству меток.

Вот как используется список чисел для отрисовки секций на диаграмме:

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

1.3 Одиночное значение

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

к сведению

Переменная может быть переменной состояния приложения или переменной вывода действия вызова API.

Вот как используются три отдельные переменные состояния приложения для отрисовки секций на диаграмме:

2. Добавление виджета круговой диаграммы

Чтобы добавить виджет круговой диаграммы в ваш проект:

1. Перетащите виджет Chart из вкладки Базовые элементы (в панели виджетов) или добавьте его напрямую из дерева виджетов.
2. Перейдите в панель свойств и установите Тип диаграммы на Pie (Круговая диаграмма).
3. Для круговой диаграммы одно Данные диаграммы представляет Секцию, нарисованную на диаграмме. Секция рисуется, предоставляя данные для этого. Откройте раздел Данные диаграммы 1 и установите Источник данных среди Документы Firestore, Списки чисел и Одиночное значение.
4. Если вы выберете Документы Firestore:
   1. Убедитесь, что у вас есть доступ к списку документов. Список документов можно получить, выполнив запрос к коллекции в любом виджете верхнего уровня, таком как виджеты Страница или Колонка. Вы также можете запросить коллекцию непосредственно на самом виджете диаграммы. Чтобы запросить коллекцию на странице:
      1. Выберите страницу и затем нажмите на вкладку Backend Query (справа от вашего экрана).
      2. Установите Тип запроса на Запрос коллекции.
      3. Прокрутите вниз, чтобы найти выпадающий список Коллекция и установите его на вашу коллекцию.
      4. Установите Тип запроса на Список документов.
      5. Нажмите Сохранить.
   2. Under the Data, click on the UNSET and set the source to the collection_name Documents > Documents (List/) and click Confirm (e.g., pets Documents > Documents (List/)).
   3. Установите Поле меток легенды, значения которого будут использоваться в качестве меток.
   4. Установите Поле значений секций, значения которого будут использоваться для отрисовки секций на диаграмме.
   5. Чтобы установить цвет секции, прокрутите вниз до Свойства круговой диаграммы > Цвет круговой диаграммы и нажмите Добавить цвет. Примечание: Убедитесь, что у вас количество цветов совпадает или превышает количество меток. В противном случае все секции будут иметь одинаковые цвета.
5. Если вы выбираете Списки чисел:
   1. Под Метками легенды нажмите НЕУСТАНОВЛЕНО и установите его на переменную, значения которой будут использоваться в качестве меток.
   2. Дополнительные параметры отображаются в соответствии с выбранным источником. Например, если вы выберете Состояние приложения, поле Доступные параметры отображается, позволяя вам выбрать фактическую переменную.
   3. Под Значениями секций нажмите на НЕУСТАНОВЛЕНО и установите его на переменную, значения которой будут использоваться для отрисовки секций на диаграмме.
   4. Чтобы установить цвет секции, прокрутите вниз до Свойства круговой диаграммы > Цвет круговой диаграммы и нажмите Добавить цвет. Примечание: Убедитесь, что у вас количество цветов совпадает или превышает количество меток. В противном случае все секции будут иметь одинаковые цвета.
6. Если вы выбираете Одиночное значение:
   1. Под Значением секции нажмите на НЕУСТАНОВЛЕНО и установите его на переменную, значение которой будет использоваться для отрисовки первой секции.
   2. Дополнительные параметры отображаются в соответствии с выбранным источником. Например, если вы выберете Состояние приложения, поле Доступные параметры отображается, позволяя вам выбрать фактическую переменную.
   3. Нажмите Добавить данные, чтобы показать несколько секций (например, Собаки, Кошки, Птицы). Примечание: Эта опция доступна только при использовании Одиночного значения.
7. Прокрутите вниз до раздела Свойства диаграммы и настройте свойства Ширина и Высота.

Использование документов Firestore

Использование списков чисел

Использование одиночного значения

Настройка секции

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

1. Выберите виджет Chart из дерева виджетов или области холста.
2. Перейдите в панель свойств и откройте Данные диаграммы > Свойства круговой диаграммы.
3. Чтобы изменить размер круга, введите значение в свойство Радиус круговой диаграммы.
4. Чтобы добавить границу вокруг секции, введите значение Ширина границы и измените ее Цвет границы.
5. Чтобы создать внутренний круг (отверстие) внутри основного круга (Пончик), введите размер в свойство Радиус отверстия пончика.
   1. Чтобы изменить Цвет отверстия пончика, нажмите на квадрат рядом с уже выбранным цветом, выберите любой темный/светлый цвет, а затем нажмите Использовать цвет или нажмите на уже выбранный цвет, введите прямо Код Hex.
6. Чтобы отобразить значение секции или его процент, установите Тип метки секции на Значение или Процент соответственно.

Отображение легенды

Легенда помогает пользователям распознавать данные, отображаемые на графике. Это небольшой блок, который показывает имя/текст данных графика (метку) рядом с их цветом (цвет, использованный для отображения определенного раздела).

Чтобы показать и настроить легенду, следуйте инструкциям здесь.