Перейти к основному содержимому

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

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

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

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

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

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

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

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

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

1.1 Документы Firestore​

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

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

pie-collection-document.avif

warning

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

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

pie-firestored-data.avif

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

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

к сведению

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

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

pie-app-state-variable.avif

warning

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

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

pie-app-state-variable-2.avif

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

1.3 Единичное значение​

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

к сведению

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

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

pie-single-value.avif

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

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

  1. Перетащите виджет Chart из вкладки Base Elements (в панели виджетов) или добавьте его напрямую из дерева виджетов.
  2. Перейдите в панель свойств и установите Chart Type в Pie.
  3. Для круговой диаграммы один Chart Data — это Section, отрисованный на диаграмме. Сектор отрисовывается путём предоставления данных для этого. Откройте раздел Chart Data 1 и установите Data Source среди вариантов Документы Firestore, Списки чисел и Единичное значение.
  4. Если вы выберете Firestore Documents:
    1. Убедитесь, что у вас есть доступ к списку документов. Список документов можно получить путём запроса коллекции в любом виджете верхнего уровня, таком как виджет Page или Column. Вы также можете выполнить запрос коллекции непосредственно на виджете Chart. Чтобы выполнить запрос коллекции на странице:
      1. Выберите page и затем нажмите на вкладку Backend Query (справа на экране).
      2. Установите Query Type в Query Collection.
      3. Прокрутите вниз, чтобы найти выпадающий список Collection, и установите его на вашу коллекцию.
      4. Установите Query Type в List of Documents.
      5. Нажмите Save.
    2. В разделе Data нажмите на UNSET и установите источник на collection_name Documents > Documents (List/), затем нажмите Confirm (например, pets Documents > Documents (List/)).
    3. Установите поле Legend Labels Field, значения которого будут использоваться как метки.
    4. Установите поле Section Values Field, значения которого будут использоваться для отрисовки секторов на диаграмме.
    5. Чтобы установить цвет сектора, прокрутите вниз до Pie Chart Properties > Pie Chart Color и нажмите Add Color. Примечание: Убедитесь, что количество цветов равно или больше количества меток. В противном случае все сектора будут иметь одинаковые цвета.
  5. Если вы выберете Numbers Lists:
    1. В разделе Legend Labels нажмите на UNSET и установите его на переменную, значения которой будут использоваться как метки.
    2. Дополнительные опции отображаются в зависимости от выбранного источника. Например, если вы выберете App State, отобразится поле Available Option, позволяющее выбрать фактическую переменную.
    3. В разделе Section Values нажмите на UNSET и установите его на переменную, значения которой будут использоваться для отрисовки секторов на диаграмме.
    4. Чтобы установить цвет сектора, прокрутите вниз до Pie Chart Properties > Pie Chart Color и нажмите Add Color. Примечание: Убедитесь, что количество цветов равно или больше количества меток. В противном случае все сектора будут иметь одинаковые цвета.
  6. Если вы выберете Single Value:
    1. В разделе Section Value нажмите на UNSET и установите его на переменную, значение которой будет использоваться для отрисовки первого сектора.
    2. Дополнительные опции отображаются в зависимости от выбранного источника. Например, если вы выберете App State, отобразится поле Available Option, позволяющее выбрать фактическую переменную.
    3. Нажмите Add Data, чтобы отобразить несколько секторов (например, Dogs, Cats, Birds). Примечание: Эта опция доступна только при использовании Single Value.
  7. Прокрутите вниз до раздела Chart Properties и настройте свойства Width и Height.

Настройка сектора​

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

  1. Выберите виджет Chart из дерева виджетов или области холста.
  2. Перейдите в панель свойств и откройте Chart Data > Pie Chart Properties.
  3. Чтобы изменить размер круга, введите значение в свойство Pie Chart Radius.
  4. Чтобы добавить границу вокруг сектора, введите значение Border Width и измените его Border Color.
  5. Чтобы создать внутренний круг (отверстие) внутри основного круга (пончика), введите размер в свойство Donut Hole Radius.
    1. Чтобы изменить Donus Hole Color, нажмите на поле рядом с уже выбранным цветом, выберите любой тёмный/светлый цвет и затем нажмите Use Color или нажмите на уже выбранный цвет, чтобы ввести Hex-код напрямую.
  6. Чтобы отобразить значение сектора или его процент, установите Section Lable Type в Value или Percent соответственно.

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

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

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