Построение линейного графика и в виде Bar от Morris.js
Добро пожаловать в заключительную часть статьи о создании красивого анимированного графика на Jquery. Как было сказано в первой части статьи существует несколько видов построения графиков, один из них в виде столбиков или Bar. Как и для всех графиков необходимы вводные данные, я использовал курс доллара к рублю и нефти за 8 лет с 2008 по 2016гг. Как вы заметили с помощью плагина Morris.js построения различных графиков становится очень легко. Вам нужно определить контейнер куда будет размещен (выведен) ваш график, а так же исходные данные для его построения, остальные опции вы всегда можете посмотреть в таблице свойств и методов для более гибкой настройки вашего графика. На деюсь данный материал будет полезен. До новых встреч!
Как подключить плагин создания графиков от Morris.js смотрите в первой части статьи.
Таблица свойств и методов для графика в виде Bar Morris.Bar(option)
element
required |
Идентификатор ID (или ссылка) элемент, в который необходимо вставить график.
Примечание: этот элемент должен иметь ширину и высоту определяется в его моделировании. |
data
required |
Данные для построения графика. Это массив объектов, содержащий х и у атрибутов, как описывается xkey и ykeys опций.
Примечание: порядок, в котором вы предоставляете данные есть порядок, в котором отображаются бары. Примечание 2: если вам необходимо обновить сюжет, используйте метод setData который возвращает объект Morris.Bar так же, как с линейными графиками). |
xkey
required |
Строка, содержащая имя атрибута, который содержит X labels. |
ykeys
required |
Список строк, содержащих имена атрибутов, которые содержат значения Y (по одному для каждой серии данных, которые будут построены). |
labels
required |
Список строк, содержащих метки для серии данных, которые будут нанесены (соответствующие значения ykeys). |
barColors |
Массив, содержащий цвета для серии баров. |
stacked |
Установите true рисовать полосы сложены вертикально. |
hideHover |
Установите в false чтобы всегда показывать парения легенду.
Установите true или 'auto' чтобы показывать только легенду парения, когда курсор мыши находится над картой.
Установите 'always' никогда не показывают парения легенды. |
hoverCallback |
Представить функцию на эту опцию, чтобы генерировать пользовательские легенды при наведении курсора мыши.
Функция будет вызвана с индексом строки под легендой парения, параметры объекта, переданного в конструктор в качестве аргументов, строка, содержащая по умолчанию генерируется парения содержание легенды HTML, и объект, содержащий исходные данные для строки, как принятый в data опция.
Пример: hoverCallback: function (index, options, content, row) {
return "sin(" + row.x + ") = " + row.y;
}
|
axes |
Установите false , чтобы отключить рисования осей х и у. |
grid |
Установите false , чтобы отключить рисование горизонтальных линий сетки. |
gridTextColor |
Установите цвет меток осей (default: #888). |
gridTextSize |
Установите размер точки метки оси (default: 12). |
gridTextFamily |
Установите семейство шрифтов из меток осей (default: sans-serif). |
gridTextWeight |
Установите шрифта метки оси (default: normal). |
resize |
Установите true , чтобы включить автоматическое изменение размеров, когда содержащий элемент изменяет размер. (default: false).
Это оказывает существенное влияние на производительность, поэтому по умолчанию отключена. |
Мои настройки плагина Morris.js
Morris.Bar({
//Контейнер для вывода графика
element: 'bar-example',
//Данные для графика
data: [
{ y: '2008', oil: 144, ruble: 24.48 },
{ y: '2009', oil: 41, ruble: 28.26 },
{ y: '2010', oil: 80, ruble: 29.59 },
{ y: '2011', oil: 94, ruble: 30.60 },
{ y: '2012', oil: 124, ruble: 31.22 },
{ y: '2013', oil: 115, ruble: 30.42 },
{ y: '2014', oil: 105, ruble: 33.15 },
{ y: '2015', oil: 56, ruble: 56.49 },
{ y: '2016', oil: 36, ruble: 75.95 }
],
//Массив занчений для оси X
xkey: 'y',
//Цвет графика
barColors:['#428bca','#5cb85c'],
//Выводимые линии
ykeys: ['oil', 'ruble'],
//Названия линий
labels: ['Нефть', 'Рубль']
});
Диаграмма цены на нефть и курса доллара с 2008 по 2016 гг.
НЕТ КОММЕНТАРИЕВ, ВЫ МОЖЕТЕ СТАТЬ ПЕРВЫМ!
Форма обратной связи
