Построение линейного графика и в виде Bar от Morris.js
Добро пожаловать в заключительную часть статьи о создании красивого анимированного графика на Jquery. Как было сказано в первой части статьи существует несколько видов построения графиков, один из них в виде столбиков или Bar. Как и для всех графиков необходимы вводные данные, я использовал курс доллара к рублю и нефти за 8 лет с 2008 по 2016гг. Как вы заметили с помощью плагина Morris.js построения различных графиков становится очень легко. Вам нужно определить контейнер куда будет размещен (выведен) ваш график, а так же исходные данные для его построения, остальные опции вы всегда можете посмотреть в таблице свойств и методов для более гибкой настройки вашего графика. На деюсь данный материал будет полезен. До новых встреч!
Как подключить плагин создания графиков от Morris.js смотрите в первой части статьи.
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: ['Нефть', 'Рубль']
});