Взаимодействие с графиком

В библиотеке JAGM график представлен в виде JavaScript-объекта, обладающего интерфейсом для управления своим состоянием.

Провайдер графиков

Для получения доступа к объектам графиков используется специальный провайдер:

import { JagmRootProvider } from "@incartdev/jagm-core";
import { JagmRawSignalsChartProvider } from "@incartdev/jagm-chart";
import { RawOfflineVisualizatorConfigJsUnpacker } from "@incartdev/jagm-visualizator";
import VisualConfig from "./VisualConfig.json";

// Получение ссылок на DOM элементы контейнера
const canvasRef = document.querySelector(".canvas-wrap");

// Создание экземпляра класса-конструктора графического полотна
const visProvider = new JagmRootProvider(new RawOfflineVisualizatorConfigJsUnpacker());

// Инициализация создания графических элементов
await visProvider.create({
  settings: VisualConfig,
  rootHtml: canvasRef
});

// Создание провайдера графиков для доступа к объектам визуализации
const chartProvider = new JagmRawSignalsChartProvider(visProvider.builder);

Типы данных

Напомним, что в библиотеке JAGM входые данные по формату представления данных разделяются на:

Сырые (Raw) данные — данные, поступающие в своих физических величинах и требующие предварительного преобразования в пиксели для отображния на графическом полотне.
Подготовленные (Prepared) данные — данные, уже преобразованные в пиксели.

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

Для каждого формата представления данных существует отдельная конфигурация провайдера.

Формат данных	Конфигурация провайдера
Raw (сырые)	JagmRawSignalsChartProvider
Prepared (подготовленные)	JagmPreparedSignalsChartProvider

Форматы данных провайдера и констурктора должны совпадать

Нельзя комбинировать сырые и подготовленные данные в рамках одного графического полотна — это приведёт к некорректной работе системы

API Провайдера

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

Свойство	Тип	Описание
charts	Массив	Список всех объектов-графиков, размещённых на полотне.
signalObjectGroups	Массив	Содержит контроллеры сигналов, отображаемых на графическом полотне. Подробнее о них читайте в разделе signals.
refreshGraphics()	Функция	Принудительно обновляет графическое отображение.
setCalibration(sourceId, channelName, signalsMap, clbK, clbB)	Функция	Устанавливает калибровочные параметры для указанного сигнала.

Объект графика

Свойство charts провайдера предоставляет доступ к списку всех графиков, размещённых на графическом полотне. Каждый график представлен в виде отдельного JavaScript-объекта с собственным API.

// Создание провайдера опущено

const charts = chartProvider.charts;
for (const chart of charts) {
  // Взаимодействие с конкретным объектом графика
}

Одно графическое полотно может содержать несколько графиков. Подробнее о способах их размещения смотрите в разделе Шаблоны расположения

API Графика

Каждый объект графика предоставляет интерфейс для управления состоянием, получения доступа к графическим элементам и взаимодействия с содержимым.

Свойство	Тип	Описание
findContentGroup(name: string)	Функция	Возвращает контроллер графического компонента по имени. Подробнее о компонентах см. в разделе Графические компоненты.
`addEventListener(eventName: string, callback: (...args) => Promise<void>)`	Функция	Регистрирует обработчик, вызываемый при возникновении указанного события.
`disableEvent(eventName: string)`	Функция	Отключает все обработчики, привязанные к заданному событию.
`enableEvent(eventName: string)`	Функция	Повторно включает ранее отключённые обработчики события.
`disableListener(eventName: string, callback: (...args) => Promise<void>)`	Функция	Отключает конкретный обработчик события.
`enableListener(eventName: string, callback: (...args) => Promise<void>)`	Функция	Повторно включает конкретный обработчик события.
`handleEvent(eventName: string, data?: unknown)`	Функция	Программно инициирует событие с опциональными данными.

Обработка событий

Подерживаемые события:

Событие	Описание
UpdateBorders	Возникает при изменении размера окна браузера. См. примеры использования.

Примеры

Пример UpdateBorders

Код примера

Была ли статья полезна?

Графики

Offline-графики