<MyRusakov.ru />

Программирование на JavaScript с Нуля до Гуру 2.0

Программирование на JavaScript с Нуля до Гуру 2.0

Данный курс научит Вас программировать на языке JavaScript, который крайне желательно знать любому уважающему себя программисту. Курс состоит из 8 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности. В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики.

Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Библиотека jQuery», «Защита JavaScript-кода от копирования», «Решение упражнений из курса», «HTML для начинающих» и «CSS для начинающих».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

JS библиотека для построения графиков

JS библиотека для построения графиков

Сегодня мы поговорим о том, как использовать простую JavaScript библиотеку, которая строит несложные графики в формате SVG. Библиотека Morris.js позволяет рисовать четыре вида графиков:

  1. линейная диаграмма
  2. диаграмма области
  3. гистограмма
  4. кольцевая диаграмма

Подключение библиотеки

Вам нужно эти CDN ссылки вставить в HTML страницу или как альтернатива извлечь файлы из скачанного архива и загрузить к себе на сайт.

<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>

HTML код

Создайте div с идентификатором myfirstchart, внутри которого построится SVG график и укажите нужную высоту.

<div id="myfirstchart" style="height: 250px;"></div>

Инициализация библиотеки

Инициализация библиотеки происходит при помощи создания экземпляра new Morris и одного из варианта графиков. Например, если мы хотим построить линейную диаграмму, то прибавляем через точку название "Line".

new Morris.Line

Идентификатор элемента и данные

Указываем селектор элемента, в котором будем строить нашу диаграмму.

element: 'myfirstchart'

Сюда заносите ваши данные, где каждый объект соответствует точке на графике.

data: [
{ label: '2018', value: 20 },
{ label: '2019', value: 10 },
{ label: '2020', value: 7 },
{ label: '2021', value: 14 },
{ label: '2022', value: 20 }
],
//форматирование величин в Donut-графике
formatter: function (y, data) { return y + 'шт.' },
// название атрибута с данными по оси x
xkey: 'label',
// название атрибута с данными по оси y
ykeys: ['value'],
//подпись рядом со значениями
labels: ['Значение']
});

Линейная диаграмма


JS библиотека для построения графиков.

Если вы хотите изменить один график на другой, то достаточно поменять название вида графика.

Диаграмма области


new Morris.Area
JS библиотека для построения графиков.

Гистограмма

new Morris.Bar
JS библиотека для построения графиков.

Кольцевая диаграмма


new Morris.Donut
JS библиотека для построения графиков.

Данная библиотека - отличный вариант для начинающего разработчика, если не нужны более сложные графики. А для долгосрочной перспективы в плане приобретения навыков программирования, рекомендую приобрести мой видеокурс. Этот курс рассчитан на тех, кто занимается или планирует заниматься созданием сайтов на заказ.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.