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

Создание круглова графика (пончик) от 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
});

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

 

Поддержи проект:



Copyright © 2014 - 2021 All rights reserved.