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

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

Теги

#Jquery #Plugins #HTML

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

Сообщений нет. Вы можете стать первым.