русский ｜ English

S2

S2 — это решение для многомерного анализа данных в таблицах, которое предоставляет компоненты для создания таблиц анализа данных. Это дополняет существующие решения для многомерного анализа данных в отрасли. Предоставляя основную библиотеку, необходимые компоненты, демонстрационные компоненты и возможности расширения, S2 позволяет разработчикам быстро и свободно использовать его.

🏠 Главная страница

• Главная страница
• Примеры

✨ Возможности

1. Многомерный анализ: Прощай одномерному анализу и приветствуй свободное сочетание любого количества измерений.
2. Высокая производительность: Поддерживает отрисовку менее чем за 8 секунд при общем объеме данных в миллионах и достигает уровня секундной отрисовки через частичное сверление.
3. Высокая масштабируемость: Поддерживает любое пользовательское расширение (включая, но не ограничиваясь, макет, стиль, взаимодействие, хук данных и т.д.).
4. Готовое к использованию: Предоставляет готовые компоненты таблиц React и Vue3 для различных сценариев анализа. Вам достаточно простого конфигурирования для быстрой реализации отрисовки сложных сценариев.
5. Высокое взаимодействие: Поддерживает богатые формы взаимодействия (одиночное выделение, круговое выделение, выделение строки, выделение столбца, заморозка шапки, перетаскивание высоты и ширины, пользовательское взаимодействие и т.д.).

📦 Установка

$ npm install @antv/s2
# yarn add @antv/s2

🔨 Начало работы

1. Подготовка данных

const s2DataConfig = {
  поля: {
    строки: ['провинция', 'город'],
    столбцы: ['тип'],
    значения: ['цена'],
  },
  данные: [
    {
      провинция: 'Чжэцзян',
      город: 'Ханьчжоу',
      тип: 'ручка',
      цена: '1',
    },
    {
      провинция: 'Чжэцзян',
      город: 'Ханьчжоу',
      тип: 'бумага',
      цена: '2',
    },
    {
      провинция: 'Чжэцзян',
      город: 'Цзоушань',
      тип: 'ручка',
      цена: '17',
    },
    {
      провинция: 'Чжэцзян',
      город: 'Цзоушань',
      тип: 'бумага',
      цена: '0.5',
    },
    {
      провинция: 'Джилин',
      город: 'Чанчжэн',
      тип: 'ручка',
      цена: '8',
    },
    {
      провинция: 'Джилин',
      город: 'Байshan',
      тип: 'ручка',
      цена: '9',
    },
    {
      провинция: 'Джилин',
      город: 'Чанчжэн',
      тип: 'бумага',
      цена: '3',
    },
    {
      провинция: 'Джилин',
      город: 'Байshan',
      тип: 'бумага',
      цена: '1',
    },
  ],
};

Обработчик клика

const s2Options = {
  ширина: 600,
  высота: 600,
}

3. Отрисовка компонента

<div id="container"></div>

import { PivotSheet } from '@antv/s2';

const container = document.getElementById('container');

const s2 = new PivotSheet(container, s2DataConfig, s2Options);

s2.render();

4. Предварительный просмотр

📦 Пакеты| Пакет | Последняя версия | Бета | Альфа | Размер | Скачать |

| ----------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- | | @antv/s2 | | | | | | | @antv/s2-react | | | | | | | @antv/s2-vue | | | | | |

👤 Автор

@AntV

🤝 Вклад

Предложения, проблемы и запросы на новые функции приветствуются. Если вы хотите внести свой вклад, проверьте страницу problems.

git clone git@github.com:antvis/S2.git

cd S2

yarn # или yarn bootstrap

# сборка всего
yarn build

# отладка s2-core
yarn core:start

# отладка s2-react
yarn react:playground

# отладка s2-vue
yarn vue:playground

# юнит-тестирование
yarn test

# проверка стиля кода и типа определения
yarn lint

# запуск сайта
yarn site:bootstrap
yarn site:start

📧 Обратная связь

👬 Вкладчики

📄 Лицензия

MIT@AntV