Инициализация

В этом руководстве описано, как создать Pivot на странице и расширить приложение возможностями сводной таблицы. Выполните следующие шаги, чтобы получить готовый к использованию компонент:

1. Подключите исходные файлы Pivot на странице.
2. Создайте контейнер для Pivot.
3. Инициализируйте Pivot с помощью конструктора.

Подключение исходных файлов

Для работы приложения Pivot на странице необходимы два исходных файла. Инструкции по загрузке пакета см. в разделе Загрузка пакетов.

Подключите следующие файлы:

• pivot.js
• pivot.css

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

index.html

<script type="text/javascript" src="./dist/pivot.js"></script>  
<link rel="stylesheet" href="./dist/pivot.css">

Создание контейнера

Pivot отрисовывается внутри HTML-элемента-контейнера. Добавьте контейнер и задайте ему идентификатор, например "root":

index.html

<div id="root"></div>

Инициализация Pivot

Конструктор pivot.Pivot принимает два параметра:

• идентификатор HTML-контейнера
• объект с параметрами конфигурации

Следующий фрагмент кода создаёт экземпляр Pivot в контейнере "root" с начальными полями, данными и структурой:

// создание Pivot
const table = new pivot.Pivot("#root", {
    // параметры конфигурации
    fields,
    data,
    config: {
        rows: ["studio", "genre"],
        columns: ["title"],
        values: [
            {
                field: "score",
                method: "max"
            }
        ]
    }
});

Конструктор возвращает экземпляр Pivot. Вызывайте методы API на возвращённом экземпляре:

• getTable — получить доступ к экземпляру виджета Table
• setConfig — обновить текущую конфигурацию Pivot
• setLocale — применить новую локаль к Pivot
• showConfigPanel — показать или скрыть панель конфигурации

Параметры конфигурации

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

информация

Полный список параметров конфигурации Pivot см. в разделе Обзор параметров.

Пример

Фрагмент ниже инициализирует Pivot с начальными данными: