Уважаемые друзья, временно не работает форма вопрос - ответ. В бижайшее время починю. Если у кого есть вопросы, можете присылать мне на почту bezramok-tlt@mail.ru

График в виде Bar от Morris.js

График в виде 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 гг.

Диаграмма в виде Bar
 
Нет комментариев, Вы можете стать первым!

Получить уведомление на Email

Введите код с картинки