F2 — решение для визуализации данных, ориентированное на мобильные устройства и готовое к использованию сразу после установки. Поддерживает среду H5 и совместимо с различными окружениями (node, мини-приложения, weex). Полная теория графической грамматики обеспечивает выполнение любых требований к визуализации данных. Профессиональные руководства по дизайну для мобильных устройств обеспечивают лучший опыт работы с графиками на мобильных устройствах. Английская версия README

Отдельное спасибо автору книги "The Grammar of Graphics" Леланду Уилкинсону за теоретическую основу графической грамматики для F2!

Установка

$ npm install @antv/f2

Основные характеристики

Ориентирован на мобильные устройства, элегантный дизайн

• Лёгкое представление, естественная обратная связь: В дизайне мы ориентируемся на пользователя, стремясь к простоте, понятности и привлекательности. Это позволяет пользователям быстрее и эффективнее получать информацию из графиков в условиях фрагментированного времени. При этом мы стремимся к органичному сочетанию содержания и действий, что делает взаимодействие более естественным.

  

  

• Легкий и плавный: F2 всегда стремится к максимальной производительности, особенно для мобильных устройств. Он поддерживает множество типов графиков (более 50), при этом размер кода остается небольшим (без учета интерактивных элементов, размер после gzip-сжатия составляет 44 кБ, с учетом всех интерактивных элементов — 56 кБ). Также предоставляется модульный подход для поддержки динамической загрузки, что позволяет улучшить размер приложения.

• Поддержка многоплатформенных сред: В то время как полностью поддерживаются среды H5, также обеспечивается совместимость с Node.js, мини-приложениями для Alipay, мини-приложениями для WeChat, React Native и средой Weex. Одна и та же кодовая база позволяет рендерить графики на различных устройствах и платформах.

  

Обширные возможности графиков и полные компоненты

В отличие от традиционных библиотек графиков, мы отказались от подхода "один график — одна реализация" и используем мощную теорию графических грамматик. Это позволяет строить различные типы графиков путём комбинирования графических грамматик. В настоящее время можно создать более 50 типов графиков (и это число продолжает расти), охватывая все возможные сценарии. Кроме базовых возможностей визуализации данных, мы предоставляем множество компонентов для расширенных функций графиков, удовлетворяющих самые разные потребности.

Гибкость и креативность

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

Документация

• Инструкция по использованию
• API
• Примеры графиков

Быстрый старт

```html

```jsx
// F2 требует, чтобы формат данных был простым JSON массивом, где каждый элемент массива представляет собой стандартный JSON объект.
const data = [
  { genre: 'Спортивные', sold: 275 },
  { genre: 'Стратегические', sold: 115 },
  { genre: 'Действие', sold: 120 },
  { genre: 'Шутеры', sold: 350 },
  { genre: 'Другое', sold: 150 },
];

// Получение контекста canvas
const context = document.getElementById('mountNode').getContext('2d');
const { props } = (
  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
    <Chart data={data}>
      <Axis field="genre" />
      <Axis field="sold" />
      <Interval x="genre" y="sold" color="genre" />
      <Tooltip />
    </Chart>
  </Canvas>
);
```const canvas = new Canvas(props);
canvas.render();

Дополнительные примеры: демо.

Сканирование QR-кода с телефона для просмотра демонстраций

Локальное развитие

$ npm install

# Сначала выполните инициализацию монорепозитория
$ npm run bootstrap

# Затем запустите тестовые случаи
$ npm run test

# Отслеживание изменений файлов для сборки и открытие страницы демонстраций
$ npm run dev

# Откройте конкретный тестовый случай
$ npm run test-watch -- 'TestFileName'

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

Если вы столкнулись с проблемами во время использования, вы можете сначала проверить наличие аналогичной ошибки или предложения в разделе issues.

Если вы хотите отправить пулл-реквест, пожалуйста, следуйте нашим инструкциям по внесению вклада.

Описание программы улучшения опыта

С версии F2 3.1.12 (выпущенной 2018-06-20) метод F2.track(true) был добавлен. В настоящее время программа улучшения опыта завершена, поэтому начиная с версии 3.3.4 этот метод будет удален из F2. Если он доставляет вам неудобства, мы приносим свои извинения.

Лицензия

Лицензия MIT.