antvis/F2

F2，一个专注于移动，开��用的�视化解决方案，�美支� H5 环境�时兼�多�环境（node, �程�，weex）。�备的图形语法��，满足你的���视化需求。专业的移动��指引为你带�最佳的移动端图表体验。英文 README

在此衷心感谢《The Grammar of Graphics》的作者 Leland Wilkinson，为 F2 的图形语法�供了��基础�

�装

$ npm install @antv/f2

特性

专注移动，体验优雅

• è½»é‡�化呈现，自然å��馈：在è?¾è?¡ä¸Šæˆ‘们以人为本，追求自然ç?€å�•æ˜“懂，有å�¸å¼•åŠ›çš„表达效果，è?©ç”¨æˆ·åœ¨ç¢Žç‰‡åŒ–的时间里更快更高效得获å�–图表信æ�¯ã€‚å�Œæ—¶åœ¨å�¯è§†åŒ–çš„æ“�作我们追求内å?¹å’Œæ“�作有机èž�å�ˆï¼Œç¬¦å�ˆäººçš„自然行为å��应，è?©äº¤äº’æ“�作更自然。

  

  

• 轻巧æµ�畅：F2 一直致力于追求æž�致的性能，针对移动è?¾å¤‡å�šäº†å¤§é‡�的优化，在支æŒ�丰富（50+）图表的基础上å�Œæ—¶ä¿�æŒ�代ç �é‡�çš„å°�巧（ä¸�带交互版本 gzip 压缩å�Ž 44k，带所有交互版本 56k），å�Œæ—¶æ��供模å�—化的è?¾è?¡ä»¥æ”¯æŒ�动æ€�加载，æ��供更优的大å°�。

• 多端异构：在å?Œç¾Žæ”¯æŒ� H5 环境的å�Œæ—¶ï¼Œå�Œæ—¶å…¼å?¹ Node.js，支付å?�å°�程åº�ã€�å¾?ä¿¡å°�程åº�ã€�React Native以å�Š Weex 端的渲染，一份代ç �，多è?¾å¤‡å¤šçŽ¯å¢ƒæ¸²æŸ“。

  

图表丰富，组件�备

与传统的图表库��，抛弃了特图特�的�装�路，基于强大的图形语法��，以数�驱动，通过图形语法的组��活构建�类图表，���绘制 50+ 图表类型（当然，还�以更多），覆盖�类场景在�供基础的图表�视化能力外，我们还�供了丰富图表功能组件，满足��功能需求。

扩展�活，创�无�

我们在�供最佳�践的�时，还为开�者�供了�活的扩展机制，包括 Shape�动画以�交互的自�义能力，当然还有图表样�的个性化�制，满足��个性化的图表�求。

文档

• 使用教程
• API
• 图表示例

快速开始

<canvas id="mountNode"></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('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();

更多示例：demos。

手机扫�观看 demos

本地开�

$ npm install

# 先�始化 monorepo
$ npm run bootstrap

# �跑测试用例
$ npm run test

# 监�文件�化构建，并打开 demo 页�
$ npm run dev

# 打开�一个具体的测试用例
$ npm run test-watch -- 'TestFileName'

如何贡�

如果您在使用的过程中碰到é—?题，å�¯ä»¥å…ˆé€šè¿‡ issues 看看有没有类似的 bug 或者建è??。

如需�交代�，请�从我们的贡�指�。

体验改进�划说明

F2 从 3.1.12（2018-06-20 å�‘布）版本开始添加了F2.track（true）方法。 ç›?å‰�我们的体验改进è?¡åˆ’å·²ç»�å?Œæˆ�，所以从 3.3.4 版本开始该方法将从 F2 中删除。 如果å?ƒç»™ä½ å¸¦æ�¥éº»çƒ¦ï¼Œæˆ‘们深表歉æ„�。

License

MIT license.