Html диаграмма круговая: Круговая диаграмма | htmlbook.ru

Круговая диаграмма | Документация AnyLogic

• Свойства
• Функции

Область диаграммыЛегенда диаграммыСетка и метки диаграммыОбновление диаграммДинамическое изменение внешнего вида диаграммыБиблиотека классов — класс PieChart

Круговая диаграмма отображает в виде секторов круга вклад нескольких элементов данных в общую составляющую. Дуги секторов пропорциональны значениям соответствующих элементов данных. Не допускается присутствие отрицательных значений — в этом случае возникнет ошибка. Если сумма значений всех элементов данных будет равна 0, то не будет отображен ни один сектор.

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

Чтобы добавить круговую диаграмму

1. Перетащите элемент Круговая диаграмма из палитры Статистика в то место графического редактора, где вы хотите нарисовать диаграмму.
2. Перейдите в секцию Данные панели Свойства.
3. Укажите заголовок для элемента данных в поле Заголовок. Введенный здесь текст будет отображаться в легенде диаграммы.
4. Введите выражение, вычисляющее значение данного элемента данных, в поле Значение. Это выражение будет динамически вычисляться во время выполнения модели, и его результат будет отображаться на диаграмме.
5. Чтобы задать цвет, которым будет отображаться данный элемент данных на диаграмме, щелкните мышью внутри элемента управления Цвет и выберите нужный цвет из списка наиболее часто используемых цветов или же выберите любой другой цвет с помощью диалога Цвета.

Чтобы добавить элемент данных на диаграмму

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

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

Чтобы удалить элемент данных с диаграммы

1. Выделите диаграмму в графическом редакторе или в панели Проекты.
2. Перейдите в секцию Данные панели Свойства.
3. Выделите элемент данных, который вы хотите удалить с данной диаграммы, и щелкните мышью по кнопке внизу секции Данные.

Свойства

Основные

Имя — Имя диаграммы. По этому имени диаграмма будет доступна из кода ее агента.

Исключить — Если опция выбрана, то диаграмма будет исключена из модели.

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

Обновлять данные автоматически — Если опция выбрана, то диаграмма будет производить обновление значений отображаемых на ней элементов данных с периодичностью, указанной в поле Период. Так же здесь вы можете выбрать, хотите ли вы

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

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

Данные

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

Заголовок — Заголовок этого элемента данных, который будет отображаться в легенде диаграммы.
Значение — Выражение, вычисляющее значение данного элемента данных. Это выражение будет динамически вычисляться во время выполнения модели, и его результат будет отображаться на диаграмме.
Цвет — Цвет, которым будет отображаться данный элемент данных на диаграмме. Щелкните мышью внутри элемента управления и выберите нужный цвет из списка наиболее часто используемых цветов или же выберите любой другой цвет с помощью диалога Цвета.

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

Внешний вид

Цвет границы — Цвет, которым будет отображаться граница диаграммы.

Цвет фона — Фоновый цвет диаграммы.

Местоположение и размер

Уровень — Уровень, на котором расположена эта диаграмма.

X — X-координата верхнего левого угла диаграммы.

Y — Y-координата верхнего левого угла диаграммы.

Ширина — Ширина диаграммы (в пикселах).

Высота — Высота диаграммы (в пикселах).

Легенда

Легенда — Если опция выбрана, то у данной диаграммы будет отображаться легенда. Вы можете управлять местоположением легенды относительно области диаграммы с помощью группы кнопок Расположение. Размер области, выделенной под легенду, задается с помощью элемента управления Ширина (или Высота, в зависимости от того, какое задано Расположение легенды). Также вы можете изменить Цвет текста легенды.

Область диаграммы

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

Смещение по оси X — Смещение области диаграммы по оси X относительно левой границы всей области, выделенной в графическом редакторе под диаграмму.

Смещение по оси Y — Смещение области диаграммы по оси Y относительно верхней границы всей области, выделенной в графическом редакторе под диаграмму.

Ширина — Ширина области диаграммы (в пикселах).

Высота — Высота области диаграммы (в пикселах).

Цвет границы — Цвет, которым будет отображаться граница области диаграммы.

Специфические

Видимость — Видимость диаграммы.

Диаграмма будет видна, если заданное здесь выражение будет истинно (true), в противном случае диаграмма отображаться не будет.

Количество — Количество экземпляров данной диаграммы. Если вы оставите это поле пустым, то будет создана только одна такая диаграмма.

Действие при изменении выделения — Код, который будет выполняться, когда пользователь выделит на диаграмме какой-то один (или несколько) элемент(ов) данных. Код будет вызываться как в том случае, если пользователь выделит элементы, щелкнув мышью по их заголовкам в легенде, так и в том случае, если он выделит их программно путем вызова метода selectItem(). Вы можете использовать в этом коде две переменные:

int[] selectedIndices — номера выделенных в текущий момент элементов данных
boolean programmatically — определяет, были ли элементы выделены программно (true) или нет (false)

Отображать имя — Если опция выбрана, то имя фигуры будет отображаться в графическом редакторе.

Функции

Данные диаграммы

Функция	Описание
void addDataItem(DataItem di)	Добавляет на диаграмму элемент данных с заданными по умолчанию заголовком и цветом. di — добавляемый элемент данных
void addDataItem(DataItem di, String title, Color color)	Добавляет на диаграмму элемент данных. di — добавляемый элемент данных title — заголовок элемента данных color — цвет, которым будет отображаться сектор данного элемента
int getCount()	Возвращает количество элементов данных, отображаемых этой диаграммой.
ChartItem get(int i)	Возвращает элемент диаграммы (DataItem, DataSet и т. д.) с заданным индексом. i — индекс элемента диаграммы
Color getColor(int i)	Возвращает цвет элемента диаграммы (DataItem, DataSet) с заданным индексом. i — индекс элемента диаграммы
void setColor(int i, Color c)	Задает новый цвет элемента диаграммы (DataItem, DataSet) с заданным индексом. i — индекс элемента диаграммы c — новый цвет элемента диаграммы
String getTitle(int i)	Возвращает заголовок элемента данных (DataItem, DataSet, и т.д.) с заданным индексом. i — индекс элемента диаграммы
void remove(int i)	Удаляет элемент (DataItem, DataSet, и т.д.) с заданным индексом с диаграммы. i — индекс элемента диаграммы
int remove(ChartItem ci)	Удаляет заданный элемент (DataItem, DataSet) с диаграммы.
void removeAll()	Удаляет все элементы с диаграммы.

Выделение элементов данных

Функция	Описание
void selectItem(int itemIndex, boolean selected)	Выделяет/снимает выделение (это зависит от значения параметра selected) с элемента диаграммы с заданным индексом. itemIndex — индекс элемента диаграммы selected — если true, то выделяет элемент, если false, то снимает выделение
void setSelectedItemIndices(int[] selectedIndices)	Выделяет элементы диаграммы с заданными индексами. Если ранее были выделены какие-то другие элементы, то это выделение будет снято. selectedIndices — массив индексов элементов диаграмм, которые будут выделены, может быть равен null — тогда выделение будет снято со всех элементов
int[] getSelectedItemIndices()	Возвращает количество элементов диаграммы, выделенных на диаграмме.

Ручное обновление данных диаграммы

Функция	Описание
void updateData()	Обновляет все элементы данных, отображаемые на этой диаграмме.

Местоположение

Функция	Описание
double getX()	Возвращает координату X диаграммы (а именно, ее левого верхнего угла).
double getY()	Возвращает координату Y диаграммы (а именно, ее левого верхнего угла).
void setX(double x)	Задает координату X диаграммы. x — новое значение координаты X
void setY(double y)	Задает координату Y диаграммы. y — новое значение координаты Y
void setPos(double x, double y)	Задает новые координаты диаграммы. x — новое значение координаты X y — новое значение координаты Y

Размер

Функция	Описание
double getWidth()	Возвращает ширину диаграммы.
double getHeight()	Возвращает высоту диаграммы.
void setWidth(double w)	Задает новую ширину диаграммы. w — новое значение ширины диаграммы
void setHeight(double h)	Задает новую высоту диаграммы. h — новое значение высоты диаграммы

Видимость

Функция	Описание
boolean isVisible()	Проверяет видимость диаграммы: если диаграмма отображается, то функция возвращает true, если не отображается — то false.
void setVisible(boolean v)	Устанавливает видимость диаграммы. v — видимость: если true — диаграмма будет видимой, если false — невидимой.

Копирование данных диаграммы в буфер обмена

Функция	Описание
String copyToClipboard()	Копирует все данные диаграммы в системный буфер обмена. Функция возвращает текстовое представление всех данных диаграммы.

Как мы можем улучшить эту статью?

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

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

начало внимание

Работа круговой диаграммой доступна только во втором рантайме. Подробнее об этом режиме читайте в Базе знаний.

конец внимание

Для построения диаграммы используются данные из объектов или структур обмена данными. Элементами диаграммы могут быть:

• экземпляры объекта — записи справочника, которые создает пользователь;
• экземпляры структуры обмена данными — отображаемые данные задаются в сценарии. Для этого нужно открыть настройки моделируемой формы, страницы, портлета или пользовательского компонента и указать сценарий на вкладке Основные в поле Скрипт при загрузке формы. Подробнее о настройках формы можно прочитать в этой статье. О настройках страницы, портлета и пользовательского компонента читайте в статье «Настройки».

Компонент можно размещать внутри других компонентов (колонки, панели, вкладки и т. д). Его можно настроить.

Окно настроек состоит из вкладок Основные, События, Системные и Отображение.

Вкладка «Основные»

На этой вкладке можно задать основные настройки диаграммы.

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

Источник данных — выбор свойства или пользовательского списка, данные которого используются для отображения в круговой диаграмме. Вы можете выбрать свойство, в качестве типа данных которого указаны объект или структура обмена данными. При этом для свойства должен быть выбран тип связи Список. Чтобы использовать на диаграмме данные объекта, для свойства с типом Объект установите флажок Загружать данные с сервера. Подробнее о работе со свойствами можно прочитать в статье «Создание свойства формы».

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

Значение — выбор свойства, данные которого определяют размер элемента диаграммы. Например, вы можете отображать годовой доход контрагентов.

Заголовок диаграммы — название диаграммы, которое увидит пользователь.

Отображение легенды — возможность добавить легенду на диаграмму. Легенда отображает элементы диаграммы и их цветовые обозначения. Выберите показывать или не показывать легенду.

Вид отображения — внешний вид круговой диаграммы в интерфейсе: Кольцо, Полукольцо, Круг, Полукруг.

Вкладка «События»

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

Действия задаются при помощи сценариев.

Действие при наведении на элемент — действие, которое выполняется, когда пользователь наводит курсор на диаграмму.

Действие при перемещении курсора за границы элемента — действие, которое выполняется, когда пользователь перемещает курсор с диаграммы в другое место на форме, странице или портлете.

Действие при Enter — действие, которое выполняется, когда пользователь наводит курсор на диаграмму и нажимает на клавишу Enter.

Действие при Escape — действие, которое выполняется, когда пользователь наводит курсор на диаграмму и нажимает на клавишу Escape.

Действие при наведении на элемент диаграммы — действие, которое выполняется, когда пользователь наводит курсор на элемент диаграммы.

Действие при перемещении курсора за границы элемента диаграммы — действие, которое выполняется, когда пользователь перемещает курсор с элемента в другое место диаграммы.

Действие при выборе элемента — действие, которое выполняется, когда пользователь нажимает на элемент диаграммы.

Вкладки «Системные» и «Отображение»

Подробнее о работе с этими вкладками можно прочитать в статье «Колонка».

Введённые данные сохраняются в настройках автоматически. Если вам нужно отменить изменения, нажмите Отменить последние изменения. Воспользоваться этой кнопкой можно, только пока открыто окно настроек.

Чтобы применить настройки, сохраните форму или сохраните и опубликуйте страницу, портлет или пользовательский компонент при помощи кнопки .

Пример использования компонента «Круговая диаграмма»

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

line-chart.html form-validation-result.html

Нашли опечатку? Выделите текст, нажмите ctrl + enter и оповестите нас

Пончиковые и круговые диаграммы | Chart.js

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

Они отлично показывают относительные пропорции между данными.

Круговые и кольцевые диаграммы фактически относятся к одному классу в Chart.js, но имеют одно другое значение по умолчанию — вырез . Это соответствует тому, какая часть внутренней части должна быть вырезана. По умолчанию это 0 для круговых диаграмм и '50%' для пончиков.

Они также зарегистрированы под двумя псевдонимами в ядре Chart . За исключением их другого значения по умолчанию и другого псевдонима, они абсолютно одинаковы.

Свойства набора данных

Пространства имен:

• data.datasets[index] — параметры только для этого набора данных0008 — параметры для всех наборов круговых данных
• options.elements.arc — параметры для всех элементов дуги
• параметры — параметры для всей диаграммы

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

3 номер0008

Наименование	Тип	Scriptable	Indexable	Default
backgroundColor	Color	Yes	Yes	'rgba(0, 0, 0, 0.1)'
borderAlign	«центр» | «внутренний»	Да	Да	«центр»
borderColor	Цвет	Да	Да	'#fff'
borderJoinStyle 9007 08	900 | 'скос' | 'митра'	Да	Да	undefined
borderRadius	номер | Объект	Да	Да	0
borderWidth	number	Yes	Yes	2
circumference	number	-	-	undefined
clip	номер | объект | ложь	-	-	не определено
data	number[]	-	-	required
hoverBackgroundColor	Color	Yes	Yes	undefined
hoverBorderColor	Цвет	Да	Да	undefined
hoverBorderJoinStyle	'круглый' | 'скос' | 'miter'	Yes	Yes	undefined
hoverBorderWidth	number	Yes	Yes	undefined
hoverOffset	number	Да	Да	0
offset	number	Yes	Yes	0
rotation	number	-	-	undefined
spacing	номер	-	-	0
вес	-	-	1

All these values, if undefined , fallback to the scopes described in option resolution

General

Name	Description
окружность	Переопределение набора данных для развертки, которую покрывают дуги
отсечение	Как отрезать относительно диаграммы. Положительное значение допускает переполнение, отрицательное значение обрезает столько пикселей внутри области диаграммы. 0 = обрезать область диаграммы. Отсечение также можно настроить для каждой стороны: клип: {слева: 5, сверху: ложь, справа: -2, снизу: 0}
поворот	Переопределение для каждого набора данных для начального угла для рисования дуг from

Стиль

Стиль каждой дуги можно контролировать с помощью следующих свойств:

Имя	Описание
1 10007 backgroundColor	цвет фона дуги.
borderColor	цвет границы дуги.
borderJoinStyle	дуговой стиль соединения границ. См. MDN (открывается в новом окне).
borderWidth	ширина границы дуги (в пикселях).
смещение	дуговое смещение (в пикселях).
интервал	Фиксированное смещение дуги (в пикселях). Аналогичен смещению , но применяется ко всем дугам.
вес	Относительная толщина набора данных. Указание значения веса приведет к тому, что набор данных круговой или кольцевой диаграммы будет отрисован с толщиной относительно суммы всех значений веса набора данных.

Все эти значения, если undefined , возвращаются к связанным elements.arc.* параметрам.

Выравнивание границы

Следующие значения поддерживаются для borderAlign .

• 'центр' (по умолчанию)
• 'внутренний'

Когда установлено 'центр' , границы дуг рядом друг с другом будут перекрываться. Когда установлен «внутренний» , гарантируется, что все границы не будут перекрываться.

Радиус границы

Если это числовое значение, оно применяется ко всем углам дуги (outerStart, externalEnd, innerStart, innerRight). Если это значение является объектом, Свойство externalStart определяет радиус границы внешнего начального угла. Точно так же можно указать свойства externalEnd , innerStart и innerEnd .

Взаимодействие

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

Наименование	Описание
Hovergenground 9008		Hovergenground.
hoverBorderColor	цвет границы дуги при наведении.
hoverBorderJoinStyle	стиль соединения границ дуги при наведении. См. MDN (открывается в новом окне).
hoverBorderWidth	ширина границы дуги при наведении (в пикселях).
hoverOffset	дуговое смещение при наведении (в пикселях).

Все эти значения, если undefined , откат к связанным параметрам elements. arc.* .

Параметры конфигурации

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

0063 номер | string

Название	Тип	По умолчанию	Описание
вырез	50% - для бублика, 0 - для пирога	Часть схемы, вырезанная из середины. Если строка и заканчивается на '%', процент от радиуса диаграммы. Число считается пикселями.
радиус	номер | string	100%	Внешний радиус диаграммы. Если строка и заканчивающаяся на '%', процент от максимального радиуса. Число считается пикселями.
поворот	число	0	Начальный угол для рисования дуг.
окружность	номер	360	Проведите, чтобы дуги покрылись.
анимация.animateRotate	boolean	true	Если true, диаграмма будет анимирована вращением. Это свойство находится в объекте options.animation .
animation.animateScale	boolean	false	Если true, будет анимировано масштабирование диаграммы от центра наружу.

Параметры по умолчанию

Мы также можем изменить эти значения по умолчанию для каждого создаваемого типа пончика, этот объект доступен в Диаграмма.переопределяет.пончик . Круговые диаграммы также имеют клон этих значений по умолчанию, доступных для изменения в Chart. overrides.pie , с той лишь разницей, что вырез установлен на 0.

Структура данных

Для круговой диаграммы наборы данных должны содержать массив точек данных. Точки данных должны быть числом, Chart.js суммирует все числа и рассчитает относительную долю каждого из них.

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

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

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

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

Стол: Любимый тип фильмов
Комедия	Действие	Романтика	Драма	Научная фантастика
4	5	6	1	4

Вы можете показать данные на этой круговой диаграмме:

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

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

Или вы можете сделать их сами...

Как сделать их самостоятельно

Сначала поместите свои данные в таблицу (как показано выше), затем сложите все значения, чтобы получить общее количество:

Таблица: Любимый тип фильмов
Комедия	Действие	Романтика	Драма	Научная фантастика	ВСЕГО
4	5	6	1	4	20

Затем разделите каждое значение на сумму и умножьте на 100, чтобы получить процент:

Комедия	Действие	Романтика	Драма	Научная фантастика	ВСЕГО
4	5	6	1	4	20
4/20 = 20%	5/20 = 25%	6/20 = 30%	1/20 = 5%	4/20 = 20%	100%

 

Теперь нужно выяснить, сколько градусов приходится на каждый «кусочек пирога» (правильно называемый сектором).

Полный круг имеет 360 градусов , поэтому мы делаем такой расчет:

Комедия	Действие	Романтика	Драма	Научная фантастика	ВСЕГО
4	5	6	1	4	20
20%	25%	30%	5%	20%	100%
4/20 × 360° = 72°	5/20 × 360° = 90°	6/20 × 360° = 108°	1/20 × 360° = 18°	4/20 × 360° = 72°	360°

 

Теперь вы готовы начать рисовать!

Нарисуй круг.

Затем с помощью транспортира измерьте градусы каждого сектора.

Здесь я показываю первый сектор.