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

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

$ npm install @antv/f2

Возможности

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

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

  

  

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

• Совместимость: поддержка многоплатформенных и многорантаймовых систем. Помимо окружения H5, F2 также может работать в Node.js, Weex рендеринге и React Native, а также в 支付宝小程序 и 微信小程序.

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

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

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

Ссылки

• Веб-сайт
• Английская документация: 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.