Позвоните нам
8 800 555-23-46
звонок по Роcсии бесплатный
+7 (495) 580 30 45 Москва
+7 (8442) 78 18 90 Волгоград
+ 7 (917) 338 51 54
Все контакты и офисы
Напишите нам: info@onvolga.ru

Спросить онлайн
  • Главная
  • Статьи о создании сайтов
  • Интегрирование библиотек morris.js и raphael.js для создания графика построения кривых Безье по доходности криптовалюты с использованием Bitrix API

Интегрирование библиотек morris.js и raphael.js для создания графика построения кривых Безье по доходности криптовалюты с использованием Bitrix API

Приходилось ли Вам строить графики функций или графики по точкам на координатной плоскости, предварительно высчитав сами точки? Наверняка сталкивались со множеством проблем, основной из которых была как построить график, применив минимальное количество усилий и затратив минимальное количество времени?

В первую очередь, разумеется, нужно посмотреть, может быть кто-то сталкивался с такой проблемой? Первая ссылка ведёт на библиотеку D3.js, возможности которой достаточно обширны, есть очень различные примеры построения различных структур, которые и графиками-то уже назвать тяжело.

Пример использования библиотеки D3.js

Пример использования библиотеки D3.js

Однако, данная библиотека оказалась относительно сложной в реализации для нашего примера, пришлось бы писать слишком много js-кода и тратить лишнее время, которого было не так уж и много.

Следующая, не менее интересная библиотека – Google Charts. Тоже, очень интересная библиотека для создания графиков, диаграмм и прочих наглядных материалов. Даже был пример графика, который нужно было построить – обычную кривую линию (ну или несколько кривых линий). Однако в последний момент при реализации возникала js-ошибка, думать над которой не хотелось, потому что времени на это было не так много.

Один из примеров использования Google chart

Один из примеров использования Google chart

Решили попробовать библиотеку morris.js. Почему? Она оказалась очень проста, понятна и доступна в использовании, её очень просто подключить к своему проекту и она идеально решает поставленную задачу.

Как же её использовать? Разумеется, первым делом необходимо подключить соответствующие стили и скрипты:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

В принципе, на этом всё, можно использовать. Алгоритм очень прост – в разметку нужно добавить блок с уникальным id, в котором отобразится сам график – в нашем примере мы сделали так:

<div id="graphic"></div>

Далее, добавляем скрипт, который отобразит наш график:

new Morris.Line({

// Сюда вписываем id нашего элемента.

element: 'graphic',

// Данные графика – каждый элемент массива data представляем собой точку.

data: [
{ year: '2008', value: 20 },
{ year: '2009', value: 10 },
{ year: '2010', value: 5 },
{ year: '2011', value: 5 },
{ year: '2012', value: 20 }
],

// Название атрибута по оси Х в массиве точек data.

xkey: 'year',

// Массив названий атрибутов по оси Y в массиве точек data (в этом примере получится одна кривая, однако количество кривых на графике не ограничено).

ykeys: ['value'],

// Метки для точек - отображается при наведении.

labels: ['Value']
});

После выполнения скрипта в блоке с id="graphic" отобразится следующая картина:

Применив Битрикс API для нашей задачи были рассчитана доходность криптовалюты - значения точек на графике для определённых дат и получилась следующее:

Интересно, что кастомизировать график очень просто – можно изменять практически всё – от цвета и размера линий, точек и текста до кривизны изгиба и добавления собственных callback-функций для событий наведения.

 Ваш запрос или вопрос по теме:

Интернет-агентство сегодня:

ТОП20 веб-студий России по разработке интернет-магазинов по доступной цене в рейтинге CMSMagazine, 1 место в ЮФО и ТОП10 Центрального ФО.

ТОП100 веб-студий Партнеров Битрикса по созданию интернет-магазинов и 11 место среди разработчиков интернет-магазинов на Битриксе по низким ценам в рейтинге РейтингРунета-2016.

ТОП10 разработчиков интернет-магазинов Москвы по доступной цене в рейтинге РейтингРунета.

ТОП120 SEO-компаний России, специализирующихся на поисковом продвижении интернет-магазинов по версии РейтингРунета.

Золотой Сертифицированный Партнер 1С-Битрикс.

Государственная аккредитация в области информационных технологий (№5291 Министерства связи РФ).

Отзывы о веб-студии

Агентство недвижимости «KuntsberG» (Москва)

Выражаю благодарность Центру интернет-решений и технологий «ONVOLGA» за создание сайта! Профессиональный, ответственный и комплексный подход работников веб-студии к заказу по созданию сайта, доброжелательное отношение, оперативное внесение всех необходимых корректировок и качественное выполнение работ. Лучшее соотношение цены и качества. Готов продолжить сотрудничество с Вами. Отдельное спасибо, Юлии!

Главный менеджер Куницин Юрий.

Все отзывы о веб-студии

ПОЛУЧИТЕ БЕСПЛАТНУЮ КОНСУЛЬТАЦИЮ или ОТПРАВЬТЕ ЗАПРОС

Задайте вопрос о веб-разработке, обслуживании или продвижении сайта или отправьте запрос по работам. Мы стараемся отвечать на Ваши запросы в течение 24 часов.