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