<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

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

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

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

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

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

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

Визуализация данных и рисование на JavaScript.

Визуализация данных и рисование на JavaScript.

Всем привет! В этой статье мы рассмотрим очень интересную и мощную библиотеку для визуализации данных и рисования с интуитивным API.

Что такое GraphicsJS

GraphicsJS – это легковесная javascript библиотека с интуитивным API, базирующаяся на SVG/VML технологии.

Чтобы понять, что может эта библиотека, перейдите на официальный сайт и прямо на главной странице вы увидите несколько примеров. Ниже на странице вы можете найти Playground, где вы также найдете много самых разных примеров и сможете сами пописать код, чтобы лучше изучить работу библиотеки.

В чем ее особенности

  • Великолепный JavaScript API – на основе логики слоев и в сочетании с простыми примитивами GraphicsJS API позволит вам создавать любые визуализации, которые вы только можете себе вообразить
  • Виртуальный DOM – это абстракция HTML DOM. Легковесная, отделенная от браузерной спецификации имплементация детализирует и обеспечивает лучшую производительность при отрисовке
  • Богатые возможности работы с текстом – вы можете управлять оберткой текста, переполнением текста, его отступами, высотой, межбуквенным расстоянием, вертикальным и горизонтальным выравниванием внутри SVG/VML выходом, произведенным с помощью GraphicsJS
  • Работает по всему миру как часть AnyChart продуктов, GraphicsJS была протестирована на всех устройствах и браузерах – компьютеры на Windows, Macs, iPhones, iPads, Android. Это работает везде, включая IE6

Быстрый старт

1) Создайте HTML файл. Подключите AnyChart на вашу страничку:

<head>
<script src="//cdn.anychart.com/js/latest/anychart.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://cdn.anychart.com/css/latest/anychart-ui.css">
</head>

2) Создайте контейнер для диаграммы:

<body>
<div id="container" style="width: 500px; height: 400px;"></div>
</body>

3) Создайте диаграмму. Поместите тег <script> со следующим кодом где-нибудь в <head> или <body> разделах. Этот пример кода использует JavaScript API, чтобы создать диаграмму, но вы можете также использовать JSON или XML форматы.

<script>
  anychart.onDocumentLoad(function() {
  // create an instance of a pie chart with data
  var chart = anychart.pie([
   ["Chocolate", 5],
   ["Rhubarb compote", 2],
   ["Crêpe Suzette", 2],
   ["American blueberry", 2],
   ["Buttermilk", 1]
  ]);
  chart.title("Top 5 pancake fillings");
  // pass the container id, chart will be displayed there
  chart.container("container");
  // call the chart draw() method to initiate chart display
  chart.draw();
  });
</script>

Более подробную информацию вы можете получить в разделе документация.

Думаю, вы точно найдете применение такой замечательной библиотеке, как эта!

А на этом у меня все. Спасибо за внимание!

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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