English
中文
Español
Deutsch
Português
日本語
Только чтение
renderScheme(host, paletteUrl, scheme) — вставить готовую схему в статью, документацию или на страницу продукта.
Диаграммы JS
Диаграммы JS — браузерный компонент, который рисует схему стратегии из Дизайнер прямо на странице: те же блоки, порты и связи, тот же вид. Без внешних зависимостей, всё на одном canvas. Схема ниже — н...
0
загрузок
☆☆☆☆☆
Рейтинг
0
отзывов
Диаграммы JS — браузерный компонент, который рисует схему стратегии из Дизайнер прямо на странице: те же блоки, порты и связи, тот же вид. Без внешних зависимостей, всё на одном canvas.
Схема ниже — не картинка, а сам компонент: тяните мышью, приближайте колесом, разворачивайте на весь экран.
0
внешних зависимостей
2
режима работы
npm
установка
Редактор
StockSharpDiagram — перетаскивание блоков, соединение портов и события об изменениях схемы.
Палитра из Дизайнера
Типы элементов, их порты и цвета берутся из той же палитры, что и в Дизайнер — схемы выглядят одинаково везде.
Схема — это узлы и связи между их портами; больше ничего знать не нужно:
import { renderScheme } from '@stocksharp/diagram/embed';
const scheme = {
nodes: [
{ id: 'candles', typeId: 'CandleElement', name: 'Свечи', x: 60, y: 130 },
{ id: 'sma', typeId: 'IndicatorElement', name: 'SMA', x: 340, y: 60 },
{ id: 'chart', typeId: 'ChartElement', name: 'График', x: 620, y: 130 },
],
links: [
{ from: 'candles', fromPort: 'Output', to: 'sma', toPort: 'Input' },
{ from: 'sma', fromPort: 'Output', to: 'chart', toPort: 'Input' },
],
};
renderScheme(document.getElementById('diagram'), '/palette.json', scheme);