Уважаемые друзья, форма вопрос - ответ снова в строю!

График в виде круга (пончик) от Morris.js

График в виде круга (пончик) от Morris.js

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

Как подключить плагин создания графиков от Morris.js смотрите в первой части статьи.

Таблица свойств и методов для графика в виде круга Morris.Donut(option)

data
required
Данные для построения диаграммы. Это массив объектов, содержащий label и value атрибутов, соответствующих надписей и размеров из сегментов круговой диаграммы.
Примечание: по умолчанию сегмент с наибольшим значением будет изначально выбран. Вы можете изменить выбор с помощью метода select(index) объекта Morris.Donut.
Примечание 2: как и для линейных диаграмм, если вам нужно обновить сюжет, используйте метод setData на объект, который возвращает Morris.Donut.
element
required
Идентификатор ID (или ссылка) элемент, в который необходимо вставить график.
Примечание: этот элемент должен иметь ширину и высоту определяется в его моделировании.
colors Массив строк, содержащих HTML-стиль шестигранные цвета для каждого из сегментов пончика. Примечание: если цветов меньше, чем сегментов, цвета будет выбранны циклично начиная с начала массива цветов.
formatter Функция, которая будет переводить y-value в качестве метки для центра диаграммы.
например: валюта function (y, data) { return '$' + y }
Примечание: при необходимости, методу также передается необязательный второй аргумент, которым является полная строка данных для заданного значения.
resize Установите true чтобы включить автоматическое изменение размеров, когда содержащий элемент изменяет размер. (default: false).
Данный метод оказывает существенное влияние на производительность, поэтому по умолчанию отключена.

Мои настройки плагина Morris.js


Morris.Donut({
	//Контейнер
	element: 'donut-example',
	//Данные
	data: [
		{label: "MySQL", value: 1321},
		{label: "PHP", value: 740},
		{label: "Perl", value: 547}
	],
	//Массив цветов для заливки
	colors:['#428bca','#5cb85c','#5bc0de'],
	//Авторазмер
	resize:true
});

График в виде круга

График в виде круга
 
Нет комментариев, Вы можете стать первым!

Получить уведомление на Email

Введите код с картинки