快速上手

声明式

F2 4.0 开始，我们将以声明式编写图表，声明式可以让你的代码更直观和简洁，避免了复杂的 API 调用，而且我们也采用了 JSX 语法，不仅方便使用，还可以很方便地和 React、Vue 这些框架结合

组件化

为了构建复杂的可视化图表，组件是一种不可或缺的能力，在 F2 里，我们也参考 React 的设计模式，内置了一套完善的组件能力，能简单方便地分装自己的组件

快速开始

下面示例是以非 React 为演示的，如果项目已经是 React，可以参考如何在 React 中使用

配置 jsx transform

因为 F2 也使用了 jsx 语法来构建图表，所以需要使用 @babel/plugin-transform-react-jsx 来编译 jsx

npm install --save-dev @babel/plugin-transform-react-jsx

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "runtime": "automatic",
        "importSource": "@antv/f2"
      }
    ]
  ]
}
// 或者
{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "jsx",
        "pragmaFrag": "Fragment"
      }
    ]
  ]
}

更多可参考@babel/plugin-transform-react-jsx

TypeScript

如果你是使用 TypeScript, 那么只需在 tsconfig.json 中加入如下配置即可

{
  "compilerOptions": {
    "jsxFactory": "jsx",
    "jsxFragmentFactory": "Fragment"
  }
}

安装

通过 npm 安装

npm install @antv/f2 --save

一分钟上手

1. 创建 canvas 标签

在页面上创建一个 <canvas>

<canvas id="myChart" width="400" height="260"></canvas>

2. 编写代码

// F2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

// 获取 canvas context
const context = document.getElementById('myChart').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();

完成上述两步之后，保存文件并用浏览器打开，一张柱状图就绘制成功了：

声明式

组件化