Китайская версия README

F2 предназначен для мобильных устройств, разработан как для разработчиков, так и для дизайнеров. Это библиотека на основе Html5 Canvas и совместима с Node.js, Weex и React Native. Основываясь на грамматике графиков, F2 предоставляет все типы графиков, которые вам могут понадобиться. Наши мобильные руководства по дизайну позволяют улучшить пользовательский опыт в проектах мобильной визуализации данных.

$ npm install @antv/f2

Возможности

Разработан для мобильных устройств

• Дизайн для мобильных устройств: делает данные более живыми и естественными взаимодействиями с графиками.

  

  

• Производительность: небольшой размер пакета (версия без взаимодействия составляет 44К после gzip) с отличной производительностью отрисовки.

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

Все типы графиков, которые вам нужны

С помощью грамматики графиков F2 поддерживаются более 50 типов графиков (их количество может быть еще больше, в зависимости от ваших потребностей), включая классические графики, такие как линии, столбчатые диаграммы, круговые диаграммы, рассеянные точки, указатели и т.д. Кроме того, F2 предоставляет богатые компоненты графиков, такие как ToolTip, Легенда и Гайд.### Гибкость и взаимодействие

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

Ссылки

• Веб-сайт
• Английская документация: https://f2.antv.vision/en
• Примеры графиков: https://f2.antv.vision/en/examples
• Русская документация: https://f2.antv.vision/zh

Другие библиотеки на основе F2

• ant-design-mobile-chart: Графики для мобильных приложений Ant Design на основе F2. (React).
• BizGoblin: Библиотека визуализации данных на основе F2 и React.
• VChart: Компоненты графиков для мобильных приложений на основе vux и F2. (Vue).
• weex-chart: Компоненты графиков на основе Weex и F2.

Демо

Демо графиков

Или просто наведите камеру на QR-код ниже, чтобы просмотреть демонстрационные примеры на мобильном устройстве:

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

<canvas id="mountNode"></canvas>

// 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();

Разработка

$ npm install

# Настройка
$ npm run bootstrap

# Запуск тестовых случаев
$ npm run test-watch

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

Пожалуйста, сообщите нам, как мы можем помочь. Сначала проверьте issues для отчетов о багах или предложений.

Чтобы стать участником проекта, пожалуйста, следуйте нашей инструкции по внесению вклада.

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

С версии 3.1.12 (выпущенной 20 июня 2018 года), мы добавили метод F2.track(true) для нашей программы улучшения опыта использования. Однако программа завершена, поэтому метод был удален из F2 с версии 3.3.4. Мы очень извиняемся, если это вызвало у вас проблемы.## Лицензия

Лицензия MIT.