Read in:
Русский
English

Графики в заметках

Блок datachart в заметке превращается в интерактивный график на опубликованной странице. Никакого отдельного редактора — вы пишете график так же, как любой другой блок кода в Obsidian.

Как это работает

Добавьте в заметку огороженный блок с идентификатором языка datachart. Внутри — один JSON-объект с двумя ключами:

  • data — откуда брать данные
  • config — объект настроек Apache ECharts, который задаёт тип и внешний вид графика
{
  "data": { "source": "inline", "rows": [ ... ] },
  "config": {
    "xAxis": { "type": "category" },
    "yAxis": { "type": "value" },
    "series": [{ "type": "bar", "encode": { "x": "month", "y": "sales" } }]
  }
}

trip2g читает объект data, загружает или считывает строки и автоматически подставляет их в config.dataset.source. Никакого плейсхолдера для данных писать не нужно — они просто появляются. Виджет ECharts на странице рисует график из результата.

Один блок = один график. Разместите в заметке столько блоков, сколько нужно — они отрисуются по порядку.

Живые примеры

Графики ниже отрисованы из блоков datachart прямо на этой странице — каждый это несколько строк markdown с данными внутри.

Источники данных

Поле data.source указывает, откуда брать строки. Доступны четыре варианта.

inline — данные прямо в блоке

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

Никаких загрузок не происходит. Строки — часть самой заметки.

frontmatter — данные из файла хранилища

Данные живут в файле .csv или .json внутри вашего хранилища Obsidian. Ссылку на файл вы указываете во frontmatter заметки, а не внутри блока кода.

Почему во frontmatter? Потому что Obsidian умеет работать с [[ссылками]] во frontmatter как с настоящими связями — автодополнение, граф, подсветка в редакторе. Ссылка внутри блока кода ничего из этого не получит.

Добавьте ссылку как свойство frontmatter, затем укажите имя этого свойства в блоке:

---
chart_sales: "[[sales-demo-ru.datachart.csv]]"
---

График ниже — живой: эта страница объявляет chart_sales в своём frontmatter и
хранит рядом небольшой sales-demo-ru.datachart.csv:

Когда читатель открывает страницу, браузер загружает файл с данными напрямую — trip2g преобразует вики-ссылку в URL ресурса и вставляет его в HTML страницы. Файл раздаётся с теми же правами доступа, что и сама заметка: свободная заметка отдаёт файл публично, платная требует подписку.

Поддерживаются оба формата. JSON-файл должен содержать массив объектов-строк. CSV-файл должен иметь строку заголовков; виджет разбирает её автоматически и приводит числовые колонки к числовому типу.

url — данные из внешнего HTTP-эндпойнта

Живые данные с любого HTTP-JSON эндпойнта, которым вы управляете. trip2g обращается к URL на стороне сервера, кеширует результат и встраивает его в отрисованный HTML. URL эндпойнта и тело запроса никогда не попадают в исходный код страницы.

График ниже живой и готов к копипасту: он указывает на крошечный демо-эндпойнт
на этом же сайте. Скопируйте блок в своё хранилище — и он нарисует тот же график,
ваш trip2g обратится к тому же публичному URL.

Эндпойнт должен возвращать плоский JSON-массив объектов-строк — ровно это и
возвращает https://trip2g.com/en/user/sales_demo_api:

[
  { "day": "2026-06-01", "revenue": 1234 },
  { "day": "2026-06-02", "revenue": 1891 }
]

Нужно передать запрос? Добавьте body — и trip2g отправит его POST-ом как JSON
вместо обычного GET. Это пример синтаксиса, укажите свой эндпойнт:

{
  "data": {
    "source": "url",
    "url": "https://api.example.com/query",
    "body": "{\"sql\":\"SELECT day, revenue FROM stats ORDER BY day\"}"
  },
  "config": {
    "xAxis": { "type": "category" },
    "yAxis": { "type": "value" },
    "series": [{ "type": "line", "encode": { "x": "day", "y": "revenue" } }]
  }
}

Когда грузятся данные. trip2g запрашивает URL на сервере, когда заметку публикуют или пересобирают (во время загрузки заметки) — не когда читатель открывает страницу. Читатель всегда получает готовый HTML. Пока идёт первая загрузка, график показывает индикатор; как только данные приходят, страница перерисовывается с ними. Дальше кешированный результат переиспользуется до следующей публикации заметки.

Заголовки авторизации (скоро). Эндпойнты с заголовком авторизации — ключ или токен — будут работать через зашифрованные серверные секреты, так что данные доступа не попадут в браузер.

internal — запрос к данным вашего сайта (скоро)

data.source = "internal" с полем sql позволит строить графики по собственному опубликованному контенту — заметки по статусу, публикации за период и подобное. Этот источник данных пока недоступен; на живом сайте график показывает индикатор загрузки.

Свойства frontmatter

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

chart_ttl (частота обновления — скоро)

Желаемый интервал обновления данных url/internal в формате длительности Go: 30m, 1h, 24h. Обновление по расписанию пока не работает — сейчас данные грузятся один раз при публикации и обновляются только при повторной публикации заметки.

chart_ttl: 1h

charts: custom

Отключает встроенную отрисовку графиков. Блоки всё равно разбираются и доступны кастомному шаблону через ctx.Charts(), чтобы вы могли расположить их в нужных местах макета.

charts: custom

Это продвинутая настройка для кастомных шаблонов. Большинству авторов она не нужна.

Типы графиков

Тип графика задаётся в config.series[].type. Три самых распространённых:

Тип series[].type Примечание
Столбчатый "bar" encode: { x: "колонка", y: "колонка" } для привязки данных
Линейный "line" Та же схема encode, что и у bar
Круговой "pie" encode: { itemName: "колонка", value: "колонка" }

Доступны все типы графиков ECharts — полный список в справочнике ECharts. Объект config передаётся в ECharts напрямую, поэтому всё, что работает в ECharts, работает и здесь.

Пример: столбчатый, линейный и круговой в одной заметке

Заметка ниже использует три типа из разных источников данных:

---
free: true
title: Обзор трафика
chart_ttl: 1h
---

Similar notes

Backlinks