Пример Использования React Stockcharts Для Рисования Диаграмм И Графических Элементов.

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

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

Статья может быть интересна фронтенд-разработчикам, решающим задачи графического отображения данных.

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

tradeview.com .

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

Решить проблему с нуля будет достаточно сложно, поэтому сначала стоит проанализировать уже имеющиеся работы.

Если поискать готовые решения в Интернете, то окажется, что графические библиотеки на базе React куча .

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

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

Другие графические библиотеки не имеют такого функционала и требуют существенной доработки.

Все, что мы можем сделать, это расширить React Stockcharts, добавив новые индикаторы и элементы рисования.

Цель этой статьи — показать, как расширить функционал библиотеки и добавить новые элементы.

Использование React Stockcharts d3js , поддерживает рисование на холсте и SVG, элементы библиотеки структурированы и разделены на отдельные компоненты.

Это облегчает понимание логики библиотеки.

При разработке использовался React версии 16.8.6; Babel и Webpack используются для сборки проекта.

С чего начать?

Установите зависимости, запустив npm install --save response-stockcharts и запустив проект с помощью npm run watch. Структура папок показывает, как организован проект. Все элементы графа разделены на отдельные компоненты и названы соответствующим образом.

Создание нового индикатора

Для создания нового индикатора вам необходимо сделать следующее: 1. Создайте файл mfi.js в папке индикатора.

Он привязывает к индикатору алгоритм, метод рисования и другие свойства.

индикатор/mfi.js

   

 import { rebind, merge } from ".

/utils";
 
 import { mfi } from ".

/calculator";
 import baseIndicator from ".

/baseIndicator";
 
 const ALGORITHM_TYPE = "MFI";
 
 export default function() {
 
 

   

• Анализ Текста В Социальных Сетях С Использованием Семантической Технологии

  19 Oct, 24

• Что Следует Учитывать При Найме Услуг Seo Для Местного Бизнеса В Торонто

  19 Oct, 24

• «Яндекс» Создаст Для Камаза Сервисы На Базе Искусственного Интеллекта

  19 Oct, 24

• Autosend, Tutorialize, Whatfix И Еще 7 Сервисов Для Обучения И Удержания Пользователей

  19 Oct, 24

• Заработок На Форексе. Правда Или Миф? Можно Ли Заработать На Рынке Форекс?

  19 Oct, 24

• Все Полезные Материалы По Wi-Fi В Одном Месте

  19 Oct, 24

• Для Каких Мобильных Платформ Вы Создаете Свое Программное Обеспечение?

  19 Oct, 24

• Выпущена Firebird 3.0

  19 Oct, 24

• Электронные Версии Печатных Изданий В Удобном Виде.

  19 Oct, 24

• Утечка 191 000 Электронных Адресов Из Резюме Авито

  19 Oct, 24