import { Canvas, Chart, Legend } from '@antv/f2';
<Canvas context={context}>
  <Chart data={data}>
    <Legend position="top" />
  </Chart>
</Canvas>

const CustomLegendView = (props) => {
  const { items } = props;
  return (
    <group
      style={{
        flexDirection: 'row',
      }}
    >
      {items.map((item) => {
        const { name, color } = item;
        return (
          <text
            style={{
              text: name,
              fill: color,
            }}
          />
        );
      })}
    </group>
  );
}

import { Canvas, Chart, withLegend } from '@antv/f2';
// 自定义 View
const CustomLegendView = (props) => {
  const { items } = props;
  return (
    <group
      style={{
        flexDirection: 'row',
      }}
    >
      {items.map((item) => {
        const { name, color } = item;
        return (
          <text
            style={{
              text: name,
              fill: color,
            }}
          />
        );
      })}
    </group>
  );
}
// 使用自定义 view 的组件
const Legend = withLegend(CustomLegendView);
<Canvas context={context}>
  <Chart data={data}>
    <Legend position="top" />
  </Chart>
</Canvas>

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

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "jsx",
        "pragmaFrag": "Fragment"
      }
    ]
  ]
}

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

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

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@antv/f2"
  }
}

安装 F2 依赖

npm i @antv/f2 --save
支付宝小程序

npm i @antv/f-my --save
微信小程序

npm i @antv/f-wx --save

{
  "scripts": {
    "beforeCompile": "babel pages --out-dir pages --only /*.jsx"
  }
}

{
  "scripts": {
    "beforeCompile": "npm run beforeCompile"
  }
}

{
  "usingComponents": {
    "f2": "@antv/f-my"
  }
}

<view class="container">
  <f2 onRender="onRenderChart" onCanvasReady="onCanvasReady"></f2>
</view>

{
  "usingComponents": {
    "f2": "@antv/f-my-web"
  }
}

<view class="container">
  <f2 onRender="onRenderChart"></f2>
</view>

.container {
  width: 100%;
  height: 600rpx;
}

import { Chart, Interval, Axis } from '@antv/f2';
export default (props) => {
  const { data } = props;
  return (
    <Chart data={data}>
      <Axis field="genre" />
      <Axis field="sold" />
      <Interval x="genre" y="sold" color="genre" />
    </Chart>
  );
}

import Chart from './chart';
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];
Page({
  data: {},
  onRenderChart() {
    return <Chart data={data} />;
  },
})

import { createElement } from '@antv/f2';
import Chart from './chart';
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];
Page({
  data: {},
  onRenderChart() {
    return createElement(Chart, {
      data: data,
    });
  },
})

{
  "usingComponents": {
    "f2": "@antv/f-wx"
  }
}

<view class="container">
  <f2 onRender="{{onRenderChart}}" />
</view>

.container {
  width: 100%;
  height: 600rpx;
}

import { Chart, Interval, Axis } from '@antv/f2';
export default (props) => {
  const { data } = props;
  return (
    <Chart data={data}>
      <Axis field="genre" />
      <Axis field="sold" />
      <Interval x="genre" y="sold" color="genre" />
    </Chart>
  );
}

import Chart from './chart';
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];
Page({
  data: {
    onRenderChart() {
      return <Chart data={data} />;
    },
  },
})

import { createElement } from '@antv/f2';
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];
Page({
  data: {
    onRenderChart() {
      return createElement(Chart, {
        data: data,
      });
    },
  },
})

npm install @antv/f2 --save
npm install canvas --save

import { Canvas, Chart, Interval, Axis } from '@antv/f2';
import { createCanvas } from 'canvas';
import fs from 'fs';
import path from 'path';
const canvas = createCanvas(200, 200);
const ctx = canvas.getContext('2d');
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];
(async () => {
  const { props } = (
    <Canvas context={ctx} pixelRatio={1} animate={false}>
      <Chart data={data}>
        <Axis field="genre" />
        <Axis field="sold" />
        <Interval x="genre" y="sold" color="genre" />
      </Chart>
    </Canvas>
  );
  const fcanvas = new Canvas(props);
  await fcanvas.render();
  const out = fs.createWriteStream(path.join(__dirname, 'chart.png'));
  const stream = canvas.createPNGStream();
  stream.pipe(out);
  out.on('finish', () => {
    process.exit();
  });
})();

npm install @antv/f2 --save
npm install @antv/f-react --save

import React from 'react';
import ReactDOM from 'react-dom';
import Canvas from '@antv/f-react';
import { Chart, Interval } from '@antv/f2';
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];
ReactDOM.render(
  <div>
    <Canvas>
      <Chart data={data}>
        <Interval x="genre" y="sold" />
      </Chart>
    </Canvas>
  </div>,
  document.getElementById('root')
)

npm install @antv/g-mobile-svg --save

<div id="container"></div>

import { Canvas, Chart, Interval, jsx, Axis } from '@antv/f2';
import { Renderer } from '@antv/g-mobile-svg';
const container = document.getElementById('container');
// 实例化 SVG 渲染器
const renderer = new Renderer();
const { props } = (
  // 声明渲染容器和渲染器
  <Canvas container={container} renderer={renderer} width={300} height={200}>
    <Chart data={data}>
      <Axis field="genre" />
      <Axis field="sold" />
      <Interval x="genre" y="sold" color="genre" />
    </Chart>
  </Canvas>
);
const canvas = new Canvas(props);
canvas.render();

npm install @antv/f2 --save
npm install @antv/f-vue --save

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

{
  chainWebpack: (config) => {
    config.module
      .rule('F2')
      .test(/\.jsx$/)
      .use('babel')
      .loader('babel-loader')
      .options({
        plugins: [
          [
            '@babel/plugin-transform-react-jsx',
            {
              runtime: 'automatic',
              importSource: '@antv/f2',
            },
          ],
        ],
      })
      .end();
  },
}

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

import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import { babel } from '@rollup/plugin-babel';
export default defineConfig({
  plugins: [
    babel({
      plugins: [
        [
          '@babel/plugin-transform-react-jsx',
          {
            runtime: 'automatic',
            importSource: '@antv/f2',
          },
        ],
      ],
    }),
    vue(),
    vueJsx(),
  ],
});

<script>
import { toRaw } from 'vue';
import Canvas from '@antv/f-vue';
import { Chart, Interval, Axis } from '@antv/f2';
const data1 = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];
const data2 = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 20 },
  { genre: 'Shooter', sold: 50 },
  { genre: 'Other', sold: 50 },
];
export default {
  name: 'App',
  data() {
    return {
      year: '2021',
      chartData: data1,
    };
  },
  mounted() {
    setTimeout(() => {
      this.year = '2022';
      this.chartData = data2;
    }, 1000);
  },
  render() {
    const { year, chartData } = this;
    return (
      <div className="container">
        <Canvas pixelRatio={window.devicePixelRatio}>
          <Chart data={toRaw(chartData)}>
            <Axis field="genre" />
            <Axis field="sold" />
            <Interval x="genre" y="sold" color="genre" />
          </Chart>
        </Canvas>
      </div>
    );
  },
};
</script>
<style>
.container {
  width: 500px;
  height: 300px;
}
</style>

/ @jsx jsx */
import { jsx } from '@antv/f2';

/ @jsxImportSource @antv/f2 */

<text
  style={{
    text: '测试',
    x: 100,
    y: 100,
  }}
  animation={{
    appear: {
      easing: 'linear',
      duration: 450,
      property: ['x', 'y'],
      start: {
        x: 0,
        y: 0,
      },
      end: {
        x: 100,
        y: 100,
      },
    },
  }}
/>

<rect
  style={{
    x: 100,
    y: 100,
    width: 50,
    height: 50,
    fill: 'blue',
  }}
  animation={{
    appear: {
      easing: 'linear',
      duration: 450,
      property: ['width', 'height'],
      start: {
        width: 0,
        height: 0,
      },
      end: {
        width: 50,
        height: 50,
      },
    },
    update: {
      easing: 'ease-in-out',
      duration: 300,
      property: ['fill'],
      start: {
        fill: 'blue',
      },
      end: {
        fill: 'red',
      },
    },
  }}
/>

<circle
  style={{
    cx: 100,
    cy: 100,
    r: 50,
    fill: 'green',
  }}
  animation={{
    leave: {
      easing: 'ease-out',
      duration: 500,
      property: ['opacity', 'r'],
      start: {
        opacity: 1,
        r: 50,
      },
      end: {
        opacity: 0,
        r: 0,
      },
    },
  }}
/>

<rect
  style={{
    x: 50,
    y: 50,
    width: 100,
    height: 100,
    fill: '#1890ff',
  }}
  animation={{
    appear: {
      easing: 'ease-in-out',
      duration: 1000,
      property: ['x', 'y', 'width', 'height', 'opacity'],
      start: {
        x: 100,
        y: 100,
        width: 0,
        height: 0,
        opacity: 0,
      },
      end: {
        x: 50,
        y: 50,
        width: 100,
        height: 100,
        opacity: 1,
      },
    },
  }}
/>

<rect
  style={{
    x: 100,
    y: 100,
    width: 50,
    height: 50,
    fill: 'red',
    transformOrigin: 'center',
  }}
  animation={{
    appear: {
      easing: 'linear',
      duration: 2000,
      property: ['transform'],
      start: {
        transform: 'rotate(0deg) scale(1)',
      },
      end: {
        transform: 'rotate(360deg) scale(1.5)',
      },
    },
  }}
/>

<text
  style={{
    text: '裁剪动画',
    x: 100,
    y: 100,
  }}
  animation={{
    appear: {
      easing: 'linear',
      duration: 1000,
      clip: {
        type: 'rect',
        property: ['width'],
        style: {
          x: 100,
          y: 100,
          height: 20,
        },
        start: {
          width: 0,
        },
        end: {
          width: 100,
        },
      },
    },
  }}
/>

<circle
  style={{
    cx: 100,
    cy: 100,
    r: 30,
    fill: 'blue',
  }}
  animation={{
    appear: {
      easing: 'ease-in-out',
      duration: 1000,
      iterations: Infinity, // 无限循环
      property: ['r'],
      start: {
        r: 20,
      },
      end: {
        r: 40,
      },
    },
  }}
/>

<rect
  style={{
    x: 100,
    y: 100,
    width: 50,
    height: 50,
    fill: 'green',
  }}
  animation={{
    appear: {
      easing: 'linear',
      duration: 500,
      delay: 1000, // 延迟 1 秒开始
      property: ['opacity'],
      start: {
        opacity: 0,
      },
      end: {
        opacity: 1,
      },
    },
  }}
/>

<circle
  style={{
    fill: '#808080',
    r: 10,
    offset: {
      type: 'polyline',
      style: {
        points: [
          [0, 3],
          [50, 10],
          [130, 80],
          [250, 40],
        ],
      },
    },
  }}
  animation={{
    appear: {
      easing: 'ease-out',
      duration: 1000,
      property: ['offsetDistance'],
      start: {
        offsetDistance: 0,
      },
      end: {
        offsetDistance: 1,
      },
    },
  }}
/>

interface Animation {
  appear?: AnimationConfig
  update?: AnimationConfig | AnimationConfig[]
  leave?: AnimationConfig
}
interface AnimationConfig {
  easing?: string
  duration?: number
  delay?: number
  fill?: 'none' | 'forwards' | 'backwards' | 'both'
  iterations?: number
  iterationStart?: number
  property?: string[]
  start?: Keyframe
  end?: Keyframe
  clip?: ClipAnimation
}
interface Keyframe {
  transform?: string
  opacity?: number
  strokeOpacity?: number
  fill?: string
  stroke?: string
  lineWidth?: number
  r?: number
  rx?: number
  ry?: number
  width?: number
  height?: number
  x?: number
  y?: number
  x1?: number
  y1?: number
  x2?: number
  y2?: number
  offsetDistance?: number
  lineDash?: number[]
  lineDashOffset?: number
  path?: string
}
interface ClipAnimation {
  type: 'circle' | 'rect' | 'polygon'
  property?: string[]
  style: Record<string, any>
  start?: Record<string, any>
  end?: Record<string, any>
}

animation={{
  appear: {
    easing: 'linear',
    duration: 2000,
    iterations: Infinity,
    property: ['opacity'],
    start: { opacity: 0 },
    end: { opacity: 1 },
  },
}}

animation={{
  appear: {
    easing: 'linear',
    duration: 1000,
    fill: 'forwards',
    property: ['x'],
    start: { x: 0 },
    end: { x: 100 },
  },
}}

animation={{
  appear: {
    easing: 'spring',
    duration: 1000,
    property: ['x'],
    start: { x: 0 },
    end: { x: 100 },
  },
}}

animation={{
  appear: {
    easing: 'ease-in-out',
    duration: 1000,
    property: ['x', 'y', 'width', 'height', 'opacity'],
    start: {
      x: 100,
      y: 100,
      width: 0,
      height: 0,
      opacity: 0,
    },
    end: {
      x: 50,
      y: 50,
      width: 100,
      height: 100,
      opacity: 1,
    },
  },
}}

import { Component } from '@antv/f2';
class MyComponent extends Component {
  render() {
    const { props } = this;
    const { text, x, y } = props;
    return <text style={{ text, x, y }} />;
  }
}

import { Component } from '@antv/f2';
class Hello extends Component {
  constructor(props) {
    super(props);
    // 初始化状态
    this.state = {
      count: 0,
    };
  }
  // 组件即将挂载
  willMount() {
    console.log('组件即将挂载');
  }
  // 组件挂载完成
  didMount() {
    console.log('组件已挂载');
    // 可以执行副作用操作，如动画、请求等
  }
  // 判断是否需要更新
  shouldUpdate(nextProps) {
    // 返回 false 跳过更新
    return true;
  }
  // 接收新属性
  willReceiveProps(nextProps) {
    console.log('即将接收新属性', nextProps);
  }
  // 组件即将更新
  willUpdate() {
    console.log('组件即将更新');
  }
  // 组件更新完成
  didUpdate() {
    console.log('组件已更新');
  }
  // 渲染组件
  render() {
    const { props, state } = this;
    const { color } = props;
    const { count } = state;
    return (
      <rect
        style={{
          x: 10,
          y: 10,
          width: 10,
          height: 10,
          fill: color,
        }}
      />
    );
  }
  // 组件即将卸载
  willUnmount() {
    console.log('组件即将卸载');
    // 清理资源，如取消事件监听等
  }
  // 组件卸载完成
  didUnmount() {
    console.log('组件已卸载');
  }
}

挂载阶段:
constructor() → willMount() → render() → didMount()
更新阶段:
willReceiveProps() → shouldUpdate() → willUpdate() → render() → didUpdate()
卸载阶段:
willUnmount() → didUnmount()

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }
  handleClick() {
    // 更新状态
    this.setState({
      count: this.state.count + 1,
    });
    // 或使用函数形式
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
    // 可以传入回调函数
    this.setState(
      { count: this.state.count + 1 },
      () => {
        console.log('状态已更新', this.state.count);
      }
    );
  }
  render() {
    const { count } = this.state;
    return <text style={{ text: Count: ${count} }} />;
  }
}

class MyComponent extends Component {
  forceRefresh() {
    this.forceUpdate(() => {
      console.log('组件已强制更新');
    });
  }
}

interface MyComponentProps {
  title: string;
  value: number;
  color?: string;
}
class MyComponent extends Component<MyComponentProps> {
  render() {
    const { props } = this;
    const { title, value, color = 'red' } = props;
    return <text style={{ text: ${title}: ${value}, fill: color }} />;
  }
}

class MyComponent extends Component {
  static defaultProps = {
    color: 'red',
    size: 12,
  };
  render() {
    const { color, size } = this.props;
    return <text style={{ fill: color, fontSize: size }} />;
  }
}

class ContextAwareComponent extends Component {
  didMount() {
    const { context } = this;
    const { px2hd, theme, layout } = context;
    // 像素单位转换
    const x = px2hd(100);
    // 访问主题
    const primaryColor = theme.primaryColor;
    // 访问布局信息
    const { width, height } = layout;
  }
  render() {
    const { context } = this;
    const { px2hd } = context;
    return (
      <text
        style={{
          x: px2hd(50),
          y: px2hd(50),
          text: 'Hello',
        }}
      />
    );
  }
}

import { Canvas } from '@antv/f2';
import Hello from './hello';
<Canvas context={context}>
  <Hello color="red" />
</Canvas>

import { Canvas, Chart, Interval } from '@antv/f2';
import DataLabel from './data-label';
<Canvas context={context}>
  <Chart data={data}>
    <Interval x="genre" y="sold" color="genre" />
    <DataLabel field="sold" />
  </Chart>
</Canvas>

class DataLabel extends Component {
  render() {
    const { props, context } = this;
    const { data, xField, yField } = props;
    const { px2hd } = context;
    return (
      <group>
        {data.map((item) => {
          const x = px2hd(item[xField]);
          const y = px2hd(item[yField]);
          return (
            <text
              style={{
                text: String(item[yField]),
                x,
                y: y - 10,
                fill: '#000',
                fontSize: '12px',
                textAlign: 'center',
              }}
            />
          );
        })}
      </group>
    );
  }
}
// 使用
<Canvas context={context}>
  <Chart data={data}>
    <Interval x="genre" y="sold" />
    <DataLabel data={data} xField="genre" yField="sold" />
  </Chart>
</Canvas>

class CustomLegend extends Component {
  render() {
    const { props } = this;
    const { items, onClick } = props;
    const { x = 10, y = 10 } = props;
    return (
      <group>
        {items.map((item, index) => (
          <g
            key={item.name}
            style={{
              transform: translate(${x}, ${y + index * 30}),
            }}
            onClick={() => onClick(item)}
          >
            <rect
              style={{
                width: 20,
                height: 20,
                fill: item.color,
              }}
            />
            <text
              style={{
                x: 30,
                y: 15,
                text: item.name,
              }}
            />
          </g>
        ))}
      </group>
    );
  }
}

class ConditionalComponent extends Component {
  render() {
    const { props } = this;
    const { data, threshold } = props;
    const shouldRender = data.some(item => item.value > threshold);
    if (!shouldRender) {
      return null;
    }
    return <rect style={{ x: 0, y: 0, width: 100, height: 100, fill: 'red' }} />;
  }
}

class AnimatedComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: 0,
    };
  }
  didMount() {
    const { animate } = this.props;
    if (animate) {
      this.startAnimation();
    }
  }
  startAnimation() {
    let progress = 0;
    const timer = setInterval(() => {
      progress += 0.1;
      if (progress >= 1) {
        progress = 1;
        clearInterval(timer);
      }
      this.setState({ progress });
    }, 50);
  }
  render() {
    const { props, state } = this;
    const { progress } = state;
    const { maxValue } = props;
    const height = maxValue * progress;
    return (
      <rect
        style={{
          x: 0,
          y: 100 - height,
          width: 50,
          height,
          fill: 'blue',
        }}
      />
    );
  }
  willUnmount() {
    // 清理定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
}

// 父组件
class ParentComponent extends Component {
  render() {
    return (
      <group>
        <ChildComponent
          data={this.props.data}
          onItemClick={this.handleItemClick}
        />
      </group>
    );
  }
  handleItemClick = (item) => {
    console.log('子组件被点击', item);
  };
}
// 子组件
class ChildComponent extends Component {
  render() {
    const { props } = this;
    const { data, onItemClick } = props;
    return (
      <group>
        {data.map((item) => (
          <rect
            key={item.id}
            style={{ x: item.x, y: item.y, width: 50, height: 50 }}
            onClick={() => onItemClick(item)}
          />
        ))}
      </group>
    );
  }
}

class OptimizedComponent extends Component {
  shouldUpdate(nextProps) {
    // 只有当关键属性变化时才更新
    return nextProps.value !== this.props.value;
  }
  render() {
    const { props } = this;
    return <text style={{ text: props.value }} />;
  }
}

// 错误示例
class BadComponent extends Component {
  render() {
    const style = { color: 'red' }; // 每次渲染都创建新对象
    return <text style={style} />;
  }
}
// 正确示例
class GoodComponent extends Component {
  render() {
    return <text style={{ color: 'red' }} />;
  }
}

<Chart
  data={data}
  coord={{
    type: 'polar',
  }}
{/ ... /}

</Chart>

<Chart
  coord={{
    type: 'rect',        // Declare Cartesian (can be omitted, default value)
    transposed: false,   // Whether to transpose axes
  }}
<Interval x="genre" y="sold" />

</Chart>

<Chart
  coord={{
    type: 'rect',
    transposed: true,    // Transpose axes
  }}
<Interval x="genre" y="sold" />

</Chart>

<Chart
  coord={{
    type: 'polar',           // Declare polar coordinate system
    startAngle: -Math.PI,    // Start angle (optional)
    endAngle: 0,             // End angle (optional)
    innerRadius: 0.3,        // Inner radius, for donut charts (optional)
    radius: 1,               // Outer radius (optional)
    transposed: false,       // Whether to transpose (optional)
  }}
{/ ... /}

</Chart>

interface CoordConfig {
  type?: 'rect' | 'polar';  // Coordinate system type
  transposed?: boolean;      // Whether to transpose
  startAngle?: number;       // Start angle (polar only)
  endAngle?: number;         // End angle (polar only)
  innerRadius?: number;      // Inner radius (polar only)
  radius?: number;           // Outer radius (polar only)
}

const data = [
  { name: 'Movie A', percent: 0.4, a: '1' },
  { name: 'Movie B', percent: 0.2, a: '1' },
  { name: 'Movie C', percent: 0.18, a: '1' },
  { name: 'Movie D', percent: 0.15, a: '1' },
  { name: 'Movie E', percent: 0.05, a: '1' },
  { name: 'Others', percent: 0.02, a: '1' },
];
<Chart data={data} coord={{ type: 'polar' }}>
  <Interval x="a" y="percent" color="name" coord="polar" />
</Chart>

const data = [
  { name: 'Jan', value: 30 },
  { name: 'Feb', value: 40 },
  { name: 'Mar', value: 35 },
  { name: 'Apr', value: 50 },
  { name: 'May', value: 45 },
  { name: 'Jun', value: 60 },
];
<Chart data={data} coord={{ type: 'polar', transposed: true }}>
  <Interval x="name" y="value" color="name" coord="polar" />
</Chart>

<Chart
  data={data}
  coord={{
    type: 'polar',
    innerRadius: 0.5,  // Set inner radius to 0.5
  }}
<Interval x="a" y="percent" color="name" coord="polar" />

</Chart>

<Chart
  data={data}
  coord={{
    type: 'polar',
    startAngle: -Math.PI / 2,  // -90 degrees
    endAngle: Math.PI / 2,     // 90 degrees
  }}
<Interval x="a" y="percent" color="name" coord="polar" />

</Chart>

const data = [
  { item: 'Attack', value: 80 },
  { item: 'Defense', value: 70 },
  { item: 'Speed', value: 90 },
  { item: 'Power', value: 60 },
  { item: 'Stamina', value: 75 },
];
<Chart
  data={data}
  scale={{
    value: {
      min: 0,
      max: 100,
    },
  }}
  coord={{
    type: 'polar',
    radius: 0.8,
  }}
<Line x="item" y="value" />

  <Point x="item" y="value" />
  <Axis field="item" />
  <Axis field="value" />
</Chart>

<Chart
  data={data}
  coord={{
    type: 'rect',
    transposed: true,  // Transpose axes
  }}
<Interval x="genre" y="sold" color="genre" />

</Chart>

<Chart
  data={data}
  coord={{
    type: 'rect',
    transposed: true,
  }}
  scale={{
    sold: {
      stack: true,  // Enable stacking
    },
  }}
<Interval x="genre" y="sold" color="type" />

</Chart>

class SwitchableChart extends Component {
  state = {
    coordType: 'rect',
  };
  handleSwitch = () => {
    this.setState({
      coordType: this.state.coordType === 'rect' ? 'polar' : 'rect',
    });
  };
  render() {
    const { coordType } = this.state;
    return (
      <Chart
        data={data}
        coord={{ type: coordType }}
      >
        <Interval x="genre" y="sold" color="genre" />
      </Chart>
    );
  }
}

<Chart
  coord={{
    type: 'polar',
    startAngle: -Math.PI,     // Start from 9 o'clock
    endAngle: 0,              // End at 3 o'clock
    innerRadius: 0.2,         // 20% inner radius
    radius: 0.9,              // 90% outer radius
  }}
{/ ... /}

</Chart>

coord={{
  type: 'polar',
  startAngle: -Math.PI / 2,  // Start from top
  endAngle: Math.PI / 2,     // End at top
}}

coord={{
  type: 'polar',
  innerRadius: 0.5,  // 50% inner radius
}}

coord={{
  type: 'polar',
  transposed: true,  // Transpose
}}

coord={{
  type: 'rect',
  transposed: true,  // Swap x and y axes
}}

<Chart
  data={data}
  coord={{
    type: 'polar',
  }}
{/ ... /}

</Chart>

<Chart
  coord={{
    type: 'rect',        // 声明直角坐标系（可省略，默认值）
    transposed: false,   // 是否转置坐标轴
  }}
<Interval x="genre" y="sold" />

</Chart>

<Chart
  coord={{
    type: 'rect',
    transposed: true,    // 转置坐标轴
  }}
<Interval x="genre" y="sold" />

</Chart>

<Chart
  coord={{
    type: 'polar',           // 声明极坐标系
    startAngle: -Math.PI,    // 起始弧度（可选）
    endAngle: 0,             // 结束弧度（可选）
    innerRadius: 0.3,        // 内半径，用于绘制环形图（可选）
    radius: 1,               // 外半径（可选）
    transposed: false,       // 是否转置（可选）
  }}
{/ ... /}

</Chart>

interface CoordConfig {
  type?: 'rect' | 'polar';  // 坐标系类型
  transposed?: boolean;      // 是否转置
  startAngle?: number;       // 起始弧度（仅极坐标）
  endAngle?: number;         // 结束弧度（仅极坐标）
  innerRadius?: number;      // 内半径（仅极坐标）
  radius?: number;           // 外半径（仅极坐标）
}

const data = [
  { name: '芳华', percent: 0.4, a: '1' },
  { name: '妖猫传', percent: 0.2, a: '1' },
  { name: '机器之血', percent: 0.18, a: '1' },
  { name: '心理罪', percent: 0.15, a: '1' },
  { name: '寻梦环游记', percent: 0.05, a: '1' },
  { name: '其他', percent: 0.02, a: '1' },
];
<Chart data={data} coord={{ type: 'polar' }}>
  <Interval x="a" y="percent" color="name" coord="polar" />
</Chart>

const data = [
  { name: '一月', value: 30 },
  { name: '二月', value: 40 },
  { name: '三月', value: 35 },
  { name: '四月', value: 50 },
  { name: '五月', value: 45 },
  { name: '六月', value: 60 },
];
<Chart data={data} coord={{ type: 'polar', transposed: true }}>
  <Interval x="name" y="value" color="name" coord="polar" />
</Chart>

<Chart
  data={data}
  coord={{
    type: 'polar',
    innerRadius: 0.5,  // 设置内半径为 0.5
  }}
<Interval x="a" y="percent" color="name" coord="polar" />

</Chart>

<Chart
  data={data}
  coord={{
    type: 'polar',
    startAngle: -Math.PI / 2,  // -90 度
    endAngle: Math.PI / 2,     // 90 度
  }}
<Interval x="a" y="percent" color="name" coord="polar" />

</Chart>

const data = [
  { item: '攻击力', value: 80 },
  { item: '防御力', value: 70 },
  { item: '速度', value: 90 },
  { item: '力量', value: 60 },
  { item: '耐力', value: 75 },
];
<Chart
  data={data}
  scale={{
    value: {
      min: 0,
      max: 100,
    },
  }}
  coord={{
    type: 'polar',
    radius: 0.8,
  }}
<Line x="item" y="value" />

  <Point x="item" y="value" />
  <Axis field="item" />
  <Axis field="value" />
</Chart>

<Chart
  data={data}
  coord={{
    type: 'rect',
    transposed: true,  // 转置坐标轴
  }}
<Interval x="genre" y="sold" color="genre" />

</Chart>

<Chart
  data={data}
  coord={{
    type: 'rect',
    transposed: true,
  }}
  scale={{
    sold: {
      stack: true,  // 启用堆叠
    },
  }}
<Interval x="genre" y="sold" color="type" />

</Chart>

class SwitchableChart extends Component {
  state = {
    coordType: 'rect',
  };
  handleSwitch = () => {
    this.setState({
      coordType: this.state.coordType === 'rect' ? 'polar' : 'rect',
    });
  };
  render() {
    const { coordType } = this.state;
    return (
      <Chart
        data={data}
        coord={{ type: coordType }}
      >
        <Interval x="genre" y="sold" color="genre" />
      </Chart>
    );
  }
}

<Chart
  coord={{
    type: 'polar',
    startAngle: -Math.PI,     // 从 9 点钟方向开始
    endAngle: 0,              // 到 3 点钟方向结束
    innerRadius: 0.2,         // 20% 内半径
    radius: 0.9,              // 90% 外半径
  }}
{/ ... /}

</Chart>

coord={{
  type: 'polar',
  startAngle: -Math.PI / 2,  // 顶部开始
  endAngle: Math.PI / 2,     // 顶部结束
}}

coord={{
  type: 'polar',
  innerRadius: 0.5,  // 50% 内半径
}}

coord={{
  type: 'polar',
  transposed: true,  // 转置
}}

coord={{
  type: 'rect',
  transposed: true,  // 交换 x 和 y 轴
}}

const data = [
  { year: 2010, sales: 40 },
  { year: 2011, sales: 30 },
  { year: 2012, sales: 50 },
  { year: 2013, sales: 60 },
  { year: 2014, sales: 70 },
  { year: 2015, sales: 80 },
  { year: 2016, sales: 80 },
  { year: 2017, sales: 90 },
  { year: 2018, sales: 120 },
];

<Canvas context={context}>
  <Chart data={data}>
    <Line x="year" y="sales" />
    <Point x="year" y="sales" />
    <Tooltip />
  </Chart>
</Canvas>

const data = [
  { name: 'Movie A', percent: 0.4, a: '1' },
  { name: 'Movie B', percent: 0.2, a: '1' },
  { name: 'Movie C', percent: 0.18, a: '1' },
  { name: 'Movie D', percent: 0.15, a: '1' },
  { name: 'Movie E', percent: 0.05, a: '1' },
  { name: 'Others', percent: 0.02, a: '1' },
];
<Chart data={data} coord={{ type: 'polar' }}>
  <Interval x="a" y="percent" color="name" coord="polar" />
</Chart>

const data = [
  { x: 'Category 1', y: [76, 100] },
  { x: 'Category 2', y: [56, 108] },
  { x: 'Category 3', y: [38, 129] },
  { x: 'Category 4', y: [58, 155] },
  { x: 'Category 5', y: [45, 120] },
  { x: 'Category 6', y: [23, 99] },
  { x: 'Category 7', y: [18, 56] },
  { x: 'Category 8', y: [18, 34] },
];
<Chart data={data}>
  <Interval x="x" y="y" />
</Chart>

const data = [
  { date: '2023-01', value: [100, 110, 95, 120] },  // [open, close, lowest, highest]
  { date: '2023-02', value: [110, 105, 100, 115] },
  { date: '2023-03', value: [105, 120, 102, 125] },
];
<Chart data={data}>
  <Axis field="date" type="timeCat" />
  <Candlestick x="date" y="value" />
</Chart>

const data = [
  { x: 10, y: 20, size: 5, category: 'A' },
  { x: 15, y: 25, size: 10, category: 'B' },
  { x: 20, y: 18, size: 8, category: 'A' },
];
<Chart data={data}>
  <Point x="x" y="y" size="size" color="category" />
</Chart>

const rawData = [
  { year: 2010, sales: 40, category: 'A' },
  { year: 2011, sales: 30, category: 'B' },
  { year: 2012, sales: 50, category: 'A' },
  { year: 2013, sales: 60, category: 'B' },
];
// Keep only data where category is 'A'
const data = rawData.filter(item => item.category === 'A');
<Chart data={data}>
  <Line x="year" y="sales" />
</Chart>

const rawData = [
  { name: 'A', value: 30 },
  { name: 'B', value: 50 },
  { name: 'C', value: 20 },
];
// Sort by value in descending order
const data = [...rawData].sort((a, b) => b.value - a.value);
<Chart data={data}>
  <Interval x="name" y="value" />
</Chart>

const rawData = [
  { category: 'A', value: 10 },
  { category: 'A', value: 20 },
  { category: 'B', value: 30 },
  { category: 'B', value: 40 },
];
// Aggregate by category (sum)
const aggregated = {};
rawData.forEach(item => {
  if (!aggregated[item.category]) {
    aggregated[item.category] = 0;
  }
  aggregated[item.category] += item.value;
});
const data = Object.entries(aggregated).map(([category, value]) => ({
  category,
  value,
}));
// Result: [{ category: 'A', value: 30 }, { category: 'B', value: 70 }]

const rawData = [
  { date: '2023-01-01', value: 100 },
  { date: '2023-02-01', value: 120 },
];
// Transform date format
const data = rawData.map(item => ({
  ...item,
  date: new Date(item.date),
  // Or add computed fields
  valueFormatted: item.value.toFixed(2),
}));

let chart = null;
// Initial data
const data1 = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
];
const { props } = (
  <Canvas context={context}>
    <Chart data={data1}>
      <Interval x="genre" y="sold" />
    </Chart>
  </Canvas>
);
chart = new Canvas(props);
chart.render();
// Update data
const data2 = [
  { genre: 'Sports', sold: 350 },
  { genre: 'Strategy', sold: 200 },
];
const { props: newProps } = (
  <Canvas context={context}>
    <Chart data={data2}>
      <Interval x="genre" y="sold" />
    </Chart>
  </Canvas>
);
chart.update(newProps); // Automatically triggers animation

// Display empty state when data is empty
const data = [];
if (data.length === 0) {
  // Show empty state
  return <EmptyState />;
}
return (
  <Chart data={data}>
    <Interval x="genre" y="sold" />
  </Chart>
);

const data = [
  { year: 2010, sales: 40 },
  { year: 2011, sales: null }, // Missing value
  { year: 2012, sales: 50 },
];
// Filter out missing values
const cleanData = data.filter(item => item.sales != null);
// Or fill with default value
const filledData = data.map(item => ({
  ...item,
  sales: item.sales ?? 0,
}));

// Data sampling example
function sampleData(data, maxSize) {
  if (data.length <= maxSize) return data;
  const step = Math.ceil(data.length / maxSize);
  return data.filter((_, index) => index % step === 0);
}
const largeData = [...]; // Large dataset
const sampledData = sampleData(largeData, 1000);
<Chart data={sampledData}>
  <Line x="date" y="value" />
</Chart>

import { Canvas, Chart, Interval, Axis, Tooltip } from '@antv/f2';
const rawData = [
  { month: 'Jan', sales: 100, profit: 20 },
  { month: 'Feb', sales: 120, profit: 25 },
  { month: 'Mar', sales: 90, profit: 15 },
  { month: 'Apr', sales: 150, profit: 35 },
  { month: 'May', sales: 180, profit: 40 },
  { month: 'Jun', sales: 200, profit: 45 },
];
// Data processing: Add profit rate field
const data = rawData.map(item => ({
  ...item,
  profitRate: (item.profit / item.sales * 100).toFixed(2) + '%',
}));
const context = document.getElementById('container').getContext('2d');
const { props } = (
  <Canvas context={context}>
    <Chart
      data={data}
      scale={{
        sales: {
          min: 0,
        },
      }}
    >
      <Axis field="month" />
      <Axis field="sales" />
      <Interval x="month" y="sales" color="month" />
      <Tooltip />
    </Chart>
  </Canvas>
);
const canvas = new Canvas(props);
canvas.render();

const data = [
  { x: 1, y: 2 },
  { x: 2, y: 4 },
];

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  const { props } = (
    <Canvas context={context}>
      <Chart data={data}>
        <Interval x="category" y="value" />
      </Chart>
    </Canvas>
  );
  const canvas = new Canvas(props);
  canvas.render();
}
fetchData();

function updateChart(userInput) {
  const data = processData(userInput);
  const { props: newProps } = (
    <Canvas context={context}>
      <Chart data={data}>
        <Interval x="category" y="value" />
      </Chart>
    </Canvas>
  );
  chart.update(newProps);
}

const data = [
  { year: 2010, sales: 40 },
  { year: 2011, sales: 30 },
  { year: 2012, sales: 50 },
  { year: 2013, sales: 60 },
  { year: 2014, sales: 70 },
  { year: 2015, sales: 80 },
  { year: 2016, sales: 80 },
  { year: 2017, sales: 90 },
  { year: 2018, sales: 120 },
];

<Canvas context={context}>
  <Chart data={data}>
    <Line x="year" y="sales" />
    <Point x="year" y="sales" />
    <Tooltip />
  </Chart>
</Canvas>

const data = [
  { name: '芳华', percent: 0.4, a: '1' },
  { name: '妖猫传', percent: 0.2, a: '1' },
  { name: '机器之血', percent: 0.18, a: '1' },
  { name: '心理罪', percent: 0.15, a: '1' },
  { name: '寻梦环游记', percent: 0.05, a: '1' },
  { name: '其他', percent: 0.02, a: '1' },
];
<Chart data={data} coord={{ type: 'polar' }}>
  <Interval x="a" y="percent" color="name" coord="polar" />
</Chart>

const data = [
  { x: '分类一', y: [76, 100] },
  { x: '分类二', y: [56, 108] },
  { x: '分类三', y: [38, 129] },
  { x: '分类四', y: [58, 155] },
  { x: '分类五', y: [45, 120] },
  { x: '分类六', y: [23, 99] },
  { x: '分类七', y: [18, 56] },
  { x: '分类八', y: [18, 34] },
];
<Chart data={data}>
  <Interval x="x" y="y" />
</Chart>

const data = [
  { date: '2023-01', value: [100, 110, 95, 120] },  // [open, close, lowest, highest]
  { date: '2023-02', value: [110, 105, 100, 115] },
  { date: '2023-03', value: [105, 120, 102, 125] },
];
<Chart data={data}>
  <Axis field="date" type="timeCat" />
  <Candlestick x="date" y="value" />
</Chart>

const data = [
  { x: 10, y: 20, size: 5, category: 'A' },
  { x: 15, y: 25, size: 10, category: 'B' },
  { x: 20, y: 18, size: 8, category: 'A' },
];
<Chart data={data}>
  <Point x="x" y="y" size="size" color="category" />
</Chart>

const rawData = [
  { year: 2010, sales: 40, category: 'A' },
  { year: 2011, sales: 30, category: 'B' },
  { year: 2012, sales: 50, category: 'A' },
  { year: 2013, sales: 60, category: 'B' },
];
// 只保留 category 为 'A' 的数据
const data = rawData.filter(item => item.category === 'A');
<Chart data={data}>
  <Line x="year" y="sales" />
</Chart>

const rawData = [
  { name: 'A', value: 30 },
  { name: 'B', value: 50 },
  { name: 'C', value: 20 },
];
// 按 value 降序排列
const data = [...rawData].sort((a, b) => b.value - a.value);
<Chart data={data}>
  <Interval x="name" y="value" />
</Chart>

const rawData = [
  { category: 'A', value: 10 },
  { category: 'A', value: 20 },
  { category: 'B', value: 30 },
  { category: 'B', value: 40 },
];
// 按 category 聚合求和
const aggregated = {};
rawData.forEach(item => {
  if (!aggregated[item.category]) {
    aggregated[item.category] = 0;
  }
  aggregated[item.category] += item.value;
});
const data = Object.entries(aggregated).map(([category, value]) => ({
  category,
  value,
}));
// 结果: [{ category: 'A', value: 30 }, { category: 'B', value: 70 }]

const rawData = [
  { date: '2023-01-01', value: 100 },
  { date: '2023-02-01', value: 120 },
];
// 转换日期格式
const data = rawData.map(item => ({
  ...item,
  date: new Date(item.date),
  // 或添加计算字段
  valueFormatted: item.value.toFixed(2),
}));

let chart = null;
// 初始化数据
const data1 = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
];
const { props } = (
  <Canvas context={context}>
    <Chart data={data1}>
      <Interval x="genre" y="sold" />
    </Chart>
  </Canvas>
);
chart = new Canvas(props);
chart.render();
// 更新数据
const data2 = [
  { genre: 'Sports', sold: 350 },
  { genre: 'Strategy', sold: 200 },
];
const { props: newProps } = (
  <Canvas context={context}>
    <Chart data={data2}>
      <Interval x="genre" y="sold" />
    </Chart>
  </Canvas>
);
chart.update(newProps); // 自动触发动画

// 数据为空时显示空状态
const data = [];
if (data.length === 0) {
  // 显示空状态提示
  return <EmptyState />;
}
return (
  <Chart data={data}>
    <Interval x="genre" y="sold" />
  </Chart>
);

const data = [
  { year: 2010, sales: 40 },
  { year: 2011, sales: null }, // 缺失值
  { year: 2012, sales: 50 },
];
// 过滤掉缺失值
const cleanData = data.filter(item => item.sales != null);
// 或使用默认值填充
const filledData = data.map(item => ({
  ...item,
  sales: item.sales ?? 0,
}));

// 数据抽样示例
function sampleData(data, maxSize) {
  if (data.length <= maxSize) return data;
  const step = Math.ceil(data.length / maxSize);
  return data.filter((_, index) => index % step === 0);
}
const largeData = [...]; // 大数据集
const sampledData = sampleData(largeData, 1000);
<Chart data={sampledData}>
  <Line x="date" y="value" />
</Chart>

import { Canvas, Chart, Interval, Axis, Tooltip } from '@antv/f2';
const rawData = [
  { month: '1月', sales: 100, profit: 20 },
  { month: '2月', sales: 120, profit: 25 },
  { month: '3月', sales: 90, profit: 15 },
  { month: '4月', sales: 150, profit: 35 },
  { month: '5月', sales: 180, profit: 40 },
  { month: '6月', sales: 200, profit: 45 },
];
// 数据处理：添加利润率字段
const data = rawData.map(item => ({
  ...item,
  profitRate: (item.profit / item.sales * 100).toFixed(2) + '%',
}));
const context = document.getElementById('container').getContext('2d');
const { props } = (
  <Canvas context={context}>
    <Chart
      data={data}
      scale={{
        sales: {
          min: 0,
        },
      }}
    >
      <Axis field="month" />
      <Axis field="sales" />
      <Interval x="month" y="sales" color="month" />
      <Tooltip />
    </Chart>
  </Canvas>
);
const canvas = new Canvas(props);
canvas.render();

const data = [
  { x: 1, y: 2 },
  { x: 2, y: 4 },
];

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  const { props } = (
    <Canvas context={context}>
      <Chart data={data}>
        <Interval x="category" y="value" />
      </Chart>
    </Canvas>
  );
  const canvas = new Canvas(props);
  canvas.render();
}
fetchData();

function updateChart(userInput) {
  const data = processData(userInput);
  const { props: newProps } = (
    <Canvas context={context}>
      <Chart data={data}>
        <Interval x="category" y="value" />
      </Chart>
    </Canvas>
  );
  chart.update(newProps);
}

npm install @antv/f2 --save

<script src="https://unpkg.com/@antv/f2/dist/index.min.js"></script>

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

// F2 requires data in JSON array format, where each element is a standard JSON object
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];
// Get 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();

npm install @antv/f2 --save

<script src="https://unpkg.com/@antv/f2/dist/index.min.js"></script>

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

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

Data
  ↓
Scale
  ↓
Geometry + Attribute
  ↓
Coordinate
  ↓
Auxiliary Elements (Axis, Legend, Tooltip, Guide)

const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

// Bar chart
<Interval x="genre" y="sold" color="genre" />
// Line chart
<Line x="date" y="value" color="type" />
// Scatter plot
<Point x="weight" y="height" color="gender" size="value" />
// Area chart
<Area x="date" y="value" color="type" />

// Color mapping - field
<Interval x="genre" y="sold" color="genre" />
// Color mapping - function
<Point
  x="weight"
  y="height"
  color={datum => datum.weight > 70 ? 'red' : 'blue'}
/>
// Size mapping
<Point x="category" y="value" size={datum => datum.value} />
// Shape mapping
<Point x="category" y="value" shape="circle" />

<Chart
  data={data}
  scale={{
    sold: {
      type: 'linear',
      min: 0,
      max: 500,
      tickCount: 5,
    },
    genre: {
      type: 'cat',
    },
    date: {
      type: 'time',
      mask: 'YYYY-MM-DD',
    },
  }}
{/ ... /}

</Chart>

// Cartesian coordinate system (default)
<Chart data={data}>
  <Interval x="genre" y="sold" />
</Chart>
// Polar coordinate system - pie chart
<Chart data={data} coord={{ type: 'polar' }}>
  <Interval x="genre" y="sold" color="genre" coord="polar" />
</Chart>
// Polar coordinate system - rose chart
<Chart data={data} coord={{ type: 'polar', innerRadius: 0.3 }}>
  <Interval x="genre" y="sold" color="genre" coord="polar" />
</Chart>

<Chart data={data}>
  <Axis field="genre" />
  <Axis field="sold" />
  <Interval x="genre" y="sold" color="genre" />
  <Tooltip />
  <Legend />
</Chart>

const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];
const context = document.getElementById('container').getContext('2d');
const { props } = (
  <Canvas context={context}>
    <Chart
      data={data}
      scale={{
        sold: {
          min: 0,
          tickInterval: 50,
        },
      }}
    >
      <Axis field="genre" />
      <Axis field="sold" />
      <Interval x="genre" y="sold" color="genre" />
      <Tooltip />
      <Legend />
    </Chart>
  </Canvas>
);
const canvas = new Canvas(props);
canvas.render();

数据 (Data)
  ↓
度量 (Scale)
  ↓
几何标记 (Geometry) + 图形属性 (Attribute)
  ↓
坐标系 (Coordinate)
  ↓
辅助元素 (Axis, Legend, Tooltip, Guide)

const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

// 柱状图
<Interval x="genre" y="sold" color="genre" />
// 折线图
<Line x="date" y="value" color="type" />
// 散点图
<Point x="weight" y="height" color="gender" size="value" />
// 面积图
<Area x="date" y="value" color="type" />

// 颜色映射 - 字段
<Interval x="genre" y="sold" color="genre" />
// 颜色映射 - 函数
<Point
  x="weight"
  y="height"
  color={datum => datum.weight > 70 ? 'red' : 'blue'}
/>
// 大小映射
<Point x="category" y="value" size={datum => datum.value} />
// 形状映射
<Point x="category" y="value" shape="circle" />

<Chart
  data={data}
  scale={{
    sold: {
      type: 'linear',
      min: 0,
      max: 500,
      tickCount: 5,
    },
    genre: {
      type: 'cat',
    },
    date: {
      type: 'time',
      mask: 'YYYY-MM-DD',
    },
  }}
{/ ... /}

</Chart>

// 直角坐标系（默认）
<Chart data={data}>
  <Interval x="genre" y="sold" />
</Chart>
// 极坐标系 - 饼图
<Chart data={data} coord={{ type: 'polar' }}>
  <Interval x="genre" y="sold" color="genre" coord="polar" />
</Chart>
// 极坐标系 - 玫瑰图
<Chart data={data} coord={{ type: 'polar', innerRadius: 0.3 }}>
  <Interval x="genre" y="sold" color="genre" coord="polar" />
</Chart>

<Chart data={data}>
  <Axis field="genre" />
  <Axis field="sold" />
  <Interval x="genre" y="sold" color="genre" />
  <Tooltip />
  <Legend />
</Chart>

const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];
const context = document.getElementById('container').getContext('2d');
const { props } = (
  <Canvas context={context}>
    <Chart
      data={data}
      scale={{
        sold: {
          min: 0,
          tickInterval: 50,
        },
      }}
    >
      <Axis field="genre" />
      <Axis field="sold" />
      <Interval x="genre" y="sold" color="genre" />
      <Tooltip />
      <Legend />
    </Chart>
  </Canvas>
);
const canvas = new Canvas(props);
canvas.render();

/ @jsx jsx */
import { jsx, Canvas } from '@antv/f2';
const context = document.getElementById('container').getContext('2d');
const Hello = () => {
  return (
    <group>
      <rect
        style={{
          x: 10,
          y: 10,
          width: 40,
          height: 40,
          lineWidth: '2px',
          stroke: '#000',
          fill: 'red',
        }}
      />
      <circle
        style={{
          cx: 80,
          cy: 30,
          r: 20,
          lineWidth: '2px',
          stroke: '#000',
          fill: 'red',
        }}
      />
      <text
        style={{
          x: 120,
          y: 30,
          text: '文本',
          fontSize: 20,
          fill: '#000',
        }}
      />
    </group>
  );
};
const { props } = (
  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
    <Hello />
  </Canvas>
);
const chart = new Canvas(props);
chart.render();

/ @jsx jsx */
import { jsx, Canvas, Component } from '@antv/f2';
const context = document.getElementById('container').getContext('2d');
class CustomShape extends Component {
  render() {
    const { x, y, color } = this.props;
    return (
      <group>
        <rect
          style={{
            x,
            y,
            width: 50,
            height: 50,
            fill: color,
          }}
        />
        <text
          style={{
            x: x + 15,
            y: y + 30,
            text: '自定义',
            fontSize: 14,
            fill: '#fff',
          }}
        />
      </group>
    );
  }
}
const Page = () => {
  return (
    <group>
      <CustomShape x={10} y={10} color="#1890ff" />
      <CustomShape x={80} y={10} color="#f5222d" />
      <CustomShape x={150} y={10} color="#52c41a" />
    </group>
  );
};
const { props } = (
  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
    <Page />
  </Canvas>
);
const chart = new Canvas(props);
chart.render();

/ @jsx jsx */
import { jsx, Canvas } from '@antv/f2';
const context = document.getElementById('container').getContext('2d');
const CustomRect = ({ x, y, width, height, color, text }) => {
  return (
    <group>
      <rect
        style={{
          x,
          y,
          width,
          height,
          fill: color,
          stroke: '#000',
          lineWidth: 2,
        }}
      />
      <text
        style={{
          x: x + width / 2 - 20,
          y: y + height / 2,
          text,
          fontSize: 16,
          fill: '#fff',
        }}
      />
    </group>
  );
};
const App = () => {
  return (
    <group>
      <CustomRect x={10} y={10} width={80} height={50} color="#1890ff" text="蓝色" />
      <CustomRect x={110} y={10} width={80} height={50} color="#f5222d" text="红色" />
    </group>
  );
};
const { props } = (
  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
    <App />
  </Canvas>
);
const chart = new Canvas(props);
chart.render();

/ @jsx jsx */
import { jsx, Canvas } from '@antv/f2';
const context = document.getElementById('container').getContext('2d');
const Bar = ({ data, index, x }) => {
  const { name, value } = data;
  const height = value * 2;
  const y = 200 - height;
  return (
    <group>
      <rect
        style={{
          x,
          y,
          width: 40,
          height,
          fill: index % 2 === 0 ? '#1890ff' : '#f5222d',
        }}
      />
      <text
        style={{
          x: x + 10,
          y: y - 10,
          text: ${value},
          fontSize: 12,
          fill: '#000',
        }}
      />
      <text
        style={{
          x: x + 5,
          y: 220,
          text: name,
          fontSize: 12,
          fill: '#666',
        }}
      />
    </group>
  );
};
const Chart = ({ data }) => {
  return (
    <group>
      {data.map((item, index) => (
        <Bar key={index} data={item} index={index} x={10 + index * 60} />
      ))}
    </group>
  );
};
const data = [
  { name: 'A', value: 30 },
  { name: 'B', value: 50 },
  { name: 'C', value: 40 },
  { name: 'D', value: 60 },
];
const { props } = (
  <Canvas context={context} pixelRatio={window.devicePixelRatio} width={400} height={300}>
    <Chart data={data} />
  </Canvas>
);
const chart = new Canvas(props);
chart.render();

/ @jsx jsx */
import { jsx, Canvas, Component } from '@antv/f2';
const context = document.getElementById('container').getContext('2d');
class InteractiveShape extends Component {
  state = {
    color: '#1890ff',
    scale: 1,
  };
  handleClick = () => {
    this.setState({
      color: this.state.color === '#1890ff' ? '#f5222d' : '#1890ff',
    });
  };
  render() {
    const { x, y } = this.props;
    const { color, scale } = this.state;
    const size = 50 * scale;
    return (
      <group
        style={{
          x,
          y,
          cursor: 'pointer',
        }}
        onTap={this.handleClick}
      >
        <rect
          style={{
            x: -size / 2,
            y: -size / 2,
            width: size,
            height: size,
            fill: color,
          }}
        />
        <text
          style={{
            x: -15,
            y: 5,
            text: '点击',
            fontSize: 14,
            fill: '#fff',
          }}
        />
      </group>
    );
  }
}
const Page = () => {
  return (
    <group>
      <InteractiveShape x={100} y={100} />
    </group>
  );
};
const { props } = (
  <Canvas context={context} pixelRatio={window.devicePixelRatio} width={300} height={300}>
    <Page />
  </Canvas>
);
const chart = new Canvas(props);
chart.render();

/ @jsx jsx */
import { jsx, Canvas } from '@antv/f2';
const context = document.getElementById('container').getContext('2d');
const RotatedRect = ({ x, y, angle, color }) => {
  return (
    <group
      style={{
        x,
        y,
        transform: rotate(${angle}deg),
      }}
    >
      <rect
        style={{
          x: -25,
          y: -25,
          width: 50,
          height: 50,
          fill: color,
        }}
      />
    </group>
  );
};
const App = () => {
  return (
    <group>
      <RotatedRect x={100} y={100} angle={0} color="#1890ff" />
      <RotatedRect x={200} y={100} angle={45} color="#f5222d" />
      <RotatedRect x={300} y={100} angle={90} color="#52c41a" />
    </group>
  );
};
const { props } = (
  <Canvas context={context} pixelRatio={window.devicePixelRatio} width={400} height={300}>
    <App />
  </Canvas>
);
const chart = new Canvas(props);
chart.render();

/ @jsx jsx */
import { jsx, Canvas } from '@antv/f2';
const context = document.getElementById('container').getContext('2d');
const GradientRect = () => {
  return (
    <rect
      style={{
        x: 50,
        y: 50,
        width: 200,
        height: 100,
        fill: 'linear-gradient(90deg, #1890ff, #f5222d)',
      }}
    />
  );
};
const { props } = (
  <Canvas context={context} pixelRatio={window.devicePixelRatio} width={300} height={200}>
    <GradientRect />
  </Canvas>
);
const chart = new Canvas(props);
chart.render();

/ @jsx jsx */
import { jsx, Canvas } from '@antv/f2';
const context = document.getElementById('container').getContext('2d');
const GradientCircle = () => {
  return (
    <circle
      style={{
        cx: 150,
        cy: 100,
        r: 80,
        fill: 'radial-gradient(circle at center, #fff, #1890ff)',
      }}
    />
  );
};
const { props } = (
  <Canvas context={context} pixelRatio={window.devicePixelRatio} width={300} height={200}>
    <GradientCircle />
  </Canvas>
);
const chart = new Canvas(props);
chart.render();

/ @jsx jsx */
import { jsx, Canvas, Chart, Interval, Axis } from '@antv/f2';
const context = document.getElementById('container').getContext('2d');
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];
const Page = () => {
  return (
    <Chart data={data} scale={{ sold: { min: 0 } }}>
      <Axis field="genre" />
      <Axis field="sold" />
      <Interval x="genre" y="sold" />
      {/ 自定义标题 /}
      <text
        style={{
          x: 150,
          y: 30,
          text: '游戏销量统计',
          fontSize: 18,
          fill: '#000',
          textAlign: 'center',
        }}
      />
    </Chart>
  );
};
const { props } = (
  <Canvas context={context} pixelRatio={window.devicePixelRatio} width={300} height={300}>
    <Page />
  </Canvas>
);
const chart = new Canvas(props);
chart.render();

<group
  style={{ cursor: 'pointer' }}
  onTap={() => console.log('点击了图形')}
  onPress={() => console.log('按住了图形')}
<rect style={{ x: 10, y: 10, width: 50, height: 50, fill: 'blue' }} />

</group>

<rect
  style={{
    x: 10,
    y: 10,
    width: 50,
    height: 50,
    fill: 'blue',
    animation: {
      appear: {
        easing: 'linear',
        duration: 1000,
        property: ['y', 'height'],
        start: { y: 200, height: 0 },
        end: { y: 10, height: 50 },
      },
    },
  }}
/>

const data = [
  { a: 'a', b: 20 },
  { a: 'b', b: 12 },
  { a: 'c', b: 8 },
];
<Chart
  data={data}
  scale={{
    a: {
      type: 'cat',      // Declare field a as categorical type
    },
    b: {
      min: 0,           // Manually specify minimum value
      max: 100,         // Manually specify maximum value
    },
  }}
<Interval x="a" y="b" />

</Chart>

// Basic configuration
<Chart
  scale={{
    value: {
      type: 'linear',
      min: 0,
      max: 100,
      tickCount: 5,
    },
  }}
<Line x="date" y="value" />

</Chart>
// Using tickInterval
<Chart
  scale={{
    value: {
      type: 'linear',
      min: 0,
      max: 100,
      tickInterval: 20,  // 0, 20, 40, 60, 80, 100
    },
  }}
<Line x="date" y="value" />

</Chart>
// Using nice to optimize range
<Chart
  scale={{
    value: {
      type: 'linear',
      nice: true,  // [3, 97] → [0, 100]
    },
  }}
<Line x="date" y="value" />

</Chart>
// Using formatter for formatting
<Chart
  scale={{
    value: {
      type: 'linear',
      formatter: (val) => ${val}%,
    },
  }}
<Line x="date" y="value" />

</Chart>

interface LinearScaleConfig {
  type?: 'linear';
  min?: number;
  max?: number;
  nice?: boolean;
  tickCount?: number;
  tickInterval?: number;
  range?: [number, number];
  alias?: string;
  formatter?: (value: number) => string;
  ticks?: number[];
}

// Basic configuration
<Chart
  scale={{
    genre: {
      type: 'cat',
    },
  }}
<Interval x="genre" y="sold" />

</Chart>
// Specify category order
<Chart
  scale={{
    level: {
      type: 'cat',
      values: ['Minimum', 'Moderate', 'Maximum'],
    },
  }}
<Interval x="level" y="value" />

</Chart>

const data = [
  { level: 'max', value: 100 },
  { level: 'min', value: 10 },
  { level: 'mid', value: 50 },
];
<Chart
  data={data}
  scale={{
    level: {
      type: 'cat',
      values: ['min', 'mid', 'max'],  // Display in specified order
    },
  }}
<Interval x="level" y="value" />

</Chart>

const data = [
  { month: 0, value: 7 },
  { month: 1, value: 12 },
  { month: 2, value: 18 },
];
<Chart
  data={data}
  scale={{
    month: {
      type: 'cat',
      values: ['January', 'February', 'March'],  // month values serve as indices
    },
  }}
<Line x="month" y="value" />

</Chart>

// Basic configuration
<Chart
  scale={{
    date: {
      type: 'timeCat',
      mask: 'YYYY-MM-DD',
    },
  }}
<Line x="date" y="value" />

</Chart>
// Custom time format
<Chart
  scale={{
    date: {
      type: 'timeCat',
      mask: 'MM/DD',  // 01/15
    },
  }}
<Line x="date" y="value" />

</Chart>
// Performance optimization: data already sorted
<Chart
  data={sortedData}
  scale={{
    date: {
      type: 'timeCat',
      sortable: false,  // Skip sorting, improve performance
    },
  }}
<Line x="date" y="value" />

</Chart>
// Specify time order
<Chart
  scale={{
    quarter: {
      type: 'cat',
      values: ['Q1', 'Q2', 'Q3', 'Q4'],
    },
  }}
<Interval x="quarter" y="value" />

</Chart>

interface TimeCatScaleConfig {
  type?: 'timeCat';
  nice?: boolean;
  mask?: string;
  sortable?: boolean;
  tickCount?: number;
  values?: string[];
  range?: [number, number];
  alias?: string;
  formatter?: (value: string | Date) => string;
  ticks?: string[];
}

<Chart
  scale={{
    value: {
      min: 0,       // Set minimum value
      max: 100,     // Set maximum value
      tickCount: 5, // 5 tick points
    },
  }}
<Line x="date" y="value" />

</Chart>

<Chart
  scale={{
    value: {
      formatter: (val) => ${val}K,
    },
    date: {
      formatter: (val) => {
        const date = new Date(val);
        return ${date.getMonth() + 1}/${date.getDate()};
      },
    },
  }}
<Line x="date" y="value" />

  <Axis field="value" />
  <Axis field="date" />
</Chart>

<Chart
  scale={{
    value: {
      min: 0,
      max: 100,
      tickInterval: 25,  // 0, 25, 50, 75, 100
    },
  }}
<Line x="date" y="value" />

</Chart>