<MyRusakov.ru />

Laravel от А до Я

Laravel от А до Я

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

Помимо курса Вы также получите упражнения для закрепления материала, а попутно ещё и создадите свой сайт, что позволит отлично закрепить материал на практике, плюс получить серьёзную работу в своё портфолио.

К курсу прилагается и очень ценный Бонус: «Создание сайта на Laravel». В этом Бонусе Вы увидите практический пример создания полноценного сайта на Laravel.

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

Подписавшись по 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):

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