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

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

Установка

$ npm install @antv/f2

Особенности

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

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

  

  

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

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

  

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

Гибкость и безграничные возможности для творчества

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

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

• Руководство по использованию
• 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();

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

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

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

$ npm install

# Сначала инициализируйте monorepo
$ 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.