Skip to content

Подключение и размер бандла

У пакета три точки входа и отдельный CDN-файл — выбирайте по тому, что важнее: простота или килобайты.

ВходЧто внутриКогда использовать
grafit-chartsвсё включено и зарегистрировано: виджеты, серии, оси, фичипрототипы, внутренние инструменты
grafit-charts/coreдвижок + register(), без единого модулякогда важен размер бандла
grafit-charts/modulesвсе модули именованными экспортами: виджеты, серии, оси, фичив паре с grafit-charts/core

Полный вход

Самый короткий путь — всё уже зарегистрировано:

ts
import { Charts } from 'grafit-charts';

Charts.create({ container, data, series: [{ type: 'line', yField: 'y' }] });

Цена удобства: в бандл попадает вся библиотека, включая серии, которые вы не используете (~43 КБ gzip).

Минимальный бандл: grafit-charts/core + grafit-charts/modules

Движок не знает ни об одном модуле — серии, оси, виджеты чартов и фичи подключаются явно, как в ECharts или Chart.js. Всё незарегистрированное tree-shaking выбрасывает:

ts
import { Charts, register } from 'grafit-charts/core';
import {
  cartesianChartModule,
  lineSeriesModule,
  categoryAxisModule,
  numberAxisModule,
  tooltipModule,
  legendModule,
} from 'grafit-charts/modules';

register(cartesianChartModule, lineSeriesModule, categoryAxisModule, numberAxisModule, tooltipModule, legendModule);

Charts.create({ container, data, series: [{ type: 'line', yField: 'y' }] });

Такой бандл — ~20 КБ gzip против ~43 КБ у полного входа (а без тултипа и легенды — ~18 КБ).

Регистрируются три вида модулей:

ВидМодулиЧто обязательно
Виджеты чартовcartesianChartModule, polarChartModule, standaloneChartModuleровно тот, что нужен вашим сериям (таблица ниже); без него Charts.create бросит ошибку
Серии и осиlineSeriesModule, numberAxisModule, …все используемые типы
ФичиtooltipModule, legendModule, gradientLegendModule, crosshairModule, navigatorModule, annotationsModule, syncModule, contextMenuModuleпо желанию: без регистрации фича просто не работает (с предупреждением в консоли)

Имена модулей образуются от типа: 'box-plot'boxPlotSeriesModule, 'radial-gauge'radialGaugeSeriesModule; оси — numberAxisModule, timeAxisModule и т. д.

Какой виджет нужен какой серии

ВиджетСерии
cartesianChartModuleline, bar, area, scatter, bubble, histogram, heatmap, range-bar, range-area, box-plot, waterfall, funnel, cone-funnel, candlestick, ohlc
polarChartModulepie, donut, radar-line, radar-area, nightingale, radial-column, radial-bar
standaloneChartModuletreemap, sunburst, pyramid, sankey, chord, radial-gauge, linear-gauge

Пресеты createFinancialChart/createGauge/createSparkline — это сборка options поверх обычных серий: financial — candlestick/ohlc (cartesian) + ordinalTimeAxisModule, navigatorModule, crosshairModule; gauge — radial-/linear-gauge (standalone); sparkline — line/area/bar (cartesian).

Какая фича за что отвечает

МодульОпции / поведение
tooltipModuletooltip — тултип при наведении
legendModulelegend — легенда с переключением серий
gradientLegendModulegradientLegend — цветовая шкала heatmap
crosshairModulecrosshair — перекрестье с подписями на осях
navigatorModulenavigator — полоса диапазона под чартом
annotationsModuleannotations — линии/области/подписи на чарте
syncModulesync — синхронизация подсветки и зума между чартами
contextMenuModulecontextMenu — правый клик: «Скачать PNG», сброс зума

Zoom, выделение данных (selection), события (listeners), темы, анимация и состояние входят в ядро — отдельной регистрации не требуют.

Не забудьте оси

Декартовым сериям нужны модули осей. Если оси не заданы в options, чарт сам подбирает пару: большинству серий — category + number, scatter/bubble/histogram — number + number. Зарегистрируйте те типы, которые понадобятся, иначе получите ошибку.

Тултип и легенда — тоже модули

В полном входе они «просто есть», но в grafit-charts/core без tooltipModule/legendModule чарт молча отрисуется без тултипа и легенды (предупреждение появится, только если они явно настроены в options). Если они нужны — зарегистрируйте их.

Если тип не зарегистрирован, чарт бросает понятную ошибку (сообщения библиотеки — на английском):

grafit: series type "sankey" is not registered. Import the module from
'grafit-charts/modules' and pass it to register() from 'grafit-charts/core', or use the
full 'grafit' entry point.

Модули ничего не делают при импорте — регистрация происходит только при явном вызове register(). Поэтому пакет честно объявляет sideEffects: false, и бандлеру безопасно выбрасывать неиспользуемое.

CDN без сборки

Для страниц без бандлера есть самодостаточный файл dist/grafit.min.js (IIFE, все модули зарегистрированы, глобал Grafit):

html
<script src="https://cdn.jsdelivr.net/npm/grafit-charts/dist/grafit.min.js"></script>
<script>
  Grafit.Charts.create({
    container: document.getElementById('chart'),
    data: [{ month: 'Янв', revenue: 42 }],
    series: [{ type: 'bar', xField: 'month', yField: 'revenue' }],
  });
</script>

Поля unpkg/jsdelivr в package.json указывают на этот файл, поэтому короткий URL https://cdn.jsdelivr.net/npm/grafit-charts отдаёт его же.

ESM-only

npm-пакет распространяется только как ESM ("type": "module"); CommonJS require('grafit-charts') не поддерживается. Для <script> без бандлера используйте CDN-файл выше.