# @alitajs/f2

> 基于 F2 封装的图表组件，支持 react hooks。帮助你快速的在移动端项目中构建图表。 完全准照 F2 的 API 封装，支持完全的图表自定义，但是其实在你的项目中，并不需要自定义图表。 我们通过对移动端的图表需求进行整理和构建，提供了一个常用的[图表库 @alitajs/charts](https://github.com/alitajs/charts)。 你可以优先使用[@alitajs/charts](https://github.com/alitajs/charts)快速实现你的需求。

Latest version **0.1.1** (published 2022-10-20) · 0 weekly downloads

## Install

```sh
npm install @alitajs/f2
pnpm add @alitajs/f2
yarn add @alitajs/f2
bun add @alitajs/f2
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2022-10-20 |
| First published | 2021-02-01 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 197.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Maintainers | pengyh, ashoka_j, diyc, xiaohuoni, imhele, wangxingkang, shawdanon, cjy0208, sorrycc, hang1017, hammersjs |

## Links

- npm: https://www.npmjs.com/package/@alitajs/f2
- Repository: https://github.com/alitajs/f2
- Homepage: https://github.com/alitajs/f2#readme
- Issues: https://github.com/alitajs/f2/issues
- npm.io page: https://npm.io/package/@alitajs/f2

## Dependencies (3)

- [jquery](https://npm.io/package/jquery.md) ^3.6.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [@antv/f2](https://npm.io/package/@antv/f2.md) ^3.8.1

## Recent versions

- 0.1.1 (latest) — 2022-10-20
- 0.0.9 — 2022-10-20
- 0.0.8 — 2022-10-18
- 0.0.7 — 2021-03-30
- 0.0.6 — 2021-03-16
- 0.0.5 — 2021-03-05
- 0.0.4 — 2021-03-05
- 0.0.3 — 2021-02-19
- 0.0.2 — 2021-02-18
- 0.0.1 — 2021-02-01

## README

# @alitajs/f2

基于 F2 封装的图表组件，支持 react hooks。帮助你快速的在移动端项目中构建图表。
完全准照 F2 的 API 封装，支持完全的图表自定义，但是其实在你的项目中，并不需要自定义图表。
我们通过对移动端的图表需求进行整理和构建，提供了一个常用的[图表库 @alitajs/charts](https://github.com/alitajs/charts)。
你可以优先使用[@alitajs/charts](https://github.com/alitajs/charts)快速实现你的需求。

## 用法

### 常规用法

```tsx
import React, { useState } from 'react';
import { Chart, Geometry } from '@alitajs/f2';

const ChartDemo = () => {
  const data = [
    { year: '1951', sales: 38 },
    { year: '1952', sales: 52 },
    { year: '1956', sales: 61 },
    { year: '1957', sales: 145 },
    { year: '1958', sales: 48 },
    { year: '1959', sales: 38 },
    { year: '1960', sales: 38 },
    { year: '1962', sales: 38 },
  ];
  return (
    <>
      <Chart width={750} height={400} data pixelRatio={window.devicePixelRatio}>
        <Geometry type="interval" position="year*sales" />
      </Chart>
    </>
  );
};

export default ChartDemo;
```

### react hooks 用法

```tsx
import React, { useState, useRef, useEffect } from 'react';
import { useChart, useGeometry } from '@alitajs/f2';

const ChartDemo = () => {
  const data = [
    { year: '1951', sales: 38 },
    { year: '1952', sales: 52 },
    { year: '1956', sales: 61 },
    { year: '1957', sales: 145 },
    { year: '1958', sales: 48 },
    { year: '1959', sales: 38 },
    { year: '1960', sales: 38 },
    { year: '1962', sales: 38 },
  ];
  const [isXy, setIsXy] = useState(true);
  const elmRef = useRef<HTMLCanvasElement>(null);
  const { setContainer, container, chart } = useChart({
    container: elmRef.current as HTMLCanvasElement,
    width: 750,
    height: 400,
    data,
    pixelRatio: window.devicePixelRatio,
  });
  const { geometry } = useGeometry({
    type: 'interval',
    chart,
    position: 'year*sales',
  });

  useEffect(() => setContainer(elmRef.current as HTMLElement | undefined), [
    elmRef.current,
  ]);
  useEffect(() => {
    if (chart && geometry) {
      geometry.position(isXy ? 'year*sales' : 'sales*year');
      chart.repaint();
    }
  }, [isXy]);

  return (
    <>
      <button
        onClick={() => {
          setIsXy(!isXy);
        }}
      >
        两级反转
      </button>
      <canvas ref={elmRef} style={{ display: 'block' }} />
    </>
  );
};

export default ChartDemo;
```

---
_Source: https://npm.io/package/@alitajs/f2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._