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

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

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

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

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

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

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

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

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

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

Шаги по созданию коллекции и добавлению данных следующие:

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

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

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

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

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

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

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

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

• Перетащите виджет Chart с вкладки Base Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
• Перейдите на панель свойств и установите для параметра Тип диаграммы значение Круговая.
• Для круговой диаграммы отдельные данные диаграммы представляют собой секцию, нарисованную на диаграмме. Секция рисуется путем предоставления данных. Откройте раздел Chart Data 1 и установите источник данных среди Firestore Documents, Numbers List и Single Value.
• Если вы выбрали Документы хранилища:
  • Убедитесь, что у вас есть доступ к списку документов. Список документов можно получить путем запроса коллекции в любом виджете верхнего уровня, например, в виджете Страница или Колонка. Вы также можете запросить коллекцию на самом виджете диаграммы. Чтобы запросить коллекцию на странице:
    • Выберите страницу, а затем перейдите на вкладку Backend Query (в правой части экрана).
    • Установите для параметра Тип запроса значение Запрос коллекции.
    • Прокрутите вниз, чтобы найти выпадающий список Collection и установите его на свою коллекцию.
    • Установите Тип запроса на Список документов.
    • Нажмите кнопку Сохранить.
  • В разделе Данные нажмите на UNSET и установите источником имя_коллекции Documents > Documents (List<collection_name>) и нажмите кнопку Подтвердить (например, pets Documents > Documents (List<pets>)).
  • Установите поле Метки легенды, значения которого будут использоваться в качестве меток.
  • Задайте поле Значения секций, значения которого будут использоваться для рисования секций на графике.
  • Чтобы задать цвет секции, прокрутите вниз до Свойства круговой диаграммы > Цвет круговой диаграммы и нажмите кнопку Добавить цвет. Примечание: Убедитесь, что количество цветов должно быть равно или больше количества меток. В противном случае все секции будут иметь одинаковые цвета.
• Если вы выбрали Списки чисел:
  • В разделе Метки легенды нажмите на UNSET и установите ее в переменную, значения которой будут использоваться в качестве меток.
  • Дальнейшие опции отображаются в соответствии с выбранным источником. Например, если вы выбрали Local State, отобразится поле Available Option, позволяющее выбрать фактическую переменную.
  • В разделе Значения секций нажмите на UNSET и установите переменную, значения которой будут использоваться для построения секций на графике.
  • Чтобы задать цвет секции, прокрутите вниз до Свойства круговой диаграммы > Цвет круговой диаграммы и нажмите кнопку Добавить цвет. Примечание: Убедитесь, что количество цветов должно быть равно или больше количества меток. В противном случае все секции будут иметь одинаковые цвета.
• Если вы выбрали значение Single Value:
  • В разделе Значение секции нажмите на UNSET и установите его в переменную, значение которой будет использоваться для рисования первой секции.
  • Дальнейшие опции отображаются в соответствии с выбранным источником. Например, если вы выберете Local State, отобразится поле Available Option, позволяющее выбрать фактическую переменную.
  • Нажмите кнопку Добавить данные, чтобы показать несколько разделов (например, Собаки, Кошки, Птицы). Примечание: Эта опция доступна только при использовании Single Value.
• Прокрутите вниз до раздела Свойства диаграммы и настройте свойства Ширина и Высота.

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

• Выберите виджет Chart в дереве виджетов или в области холста.
• Перейдите на панель свойств и откройте Свойства диаграммы > Круговая диаграмма.
• Чтобы изменить размер круга, введите значение в свойство Радиус круговой диаграммы.
• Чтобы добавить границу вокруг области, введите значение для ширины границы и измените цвет границы.
• Чтобы создать внутренний круг (отверстие) внутри основного круга (Donut), введите значение в свойстве Donut Hole Radius.
  • Чтобы изменить цвет отверстия Donus, щелкните в поле рядом с уже выбранным цветом, выберите любой темный/светлый цвет, а затем нажмите кнопку Использовать цвет, или щелкните в уже выбранном цвете и введите Hex-код напрямую.
• Чтобы отобразить значение или процент раздела, установите для параметра Section Lable Type значение Value или Percent соответственно.
  • Чтобы изменить его стиль, следуйте инструкциям здесь.

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

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