Китайский язык (упрощённый) | Английский

S2

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

🏠 Официальный сайт

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

✨ Функциональность

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

📦 Установка

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

🔨 Использование

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

const s2DataConfig = {
  fields: {
    rows: ['province', 'city'],
    columns: ['type'],
    values: ['price'],
  },
  data: [
    {
      province: '浙江省',
      city: '杭州市',
      type: '铅笔',
      price: '1',
    },
    {
      province: '浙江省',
      city: '杭州市',
      type: '纸张',
      price: '2',
    },
    {
      province: '浙江省',
      city: '舟山市',
      type: '铅笔',
      price: '17',
    },
    {
      province: '浙江省',
      city: '舟山市',
      type: '纸张',
      price: '0.5',
    },
    {
      province: '吉林省',
      city: '长春市',
      type: '铅笔',
      price: '8',
    },
    {
      province: '吉林省',
      city: '白山市',
      type: '铅笔',
      price: '9',
    },
    {
      province: '吉林省',
      city: '长春市',
      type: '纸张',
      price: '3',
    },
    {
      province: '吉林省',
      city: '白山市',
      type: '纸张',
      price: '1',
    },
  ],
};

2. Настройка параметров

const s2Options = {
  width: 600,
  height: 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

🤝 Внесите свой вклад

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