38

GitHub - antvis/f2: 基于 HTML5 Canvas，开箱即用的移动端可视化解决方案

 6 years ago
source link: https://github.com/antvis/f2
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

F2: 基于 HTML5 Canvas，开箱即用的移动端可视化解决方案

npm package NPM downloads Percentage of issues still open

F2（Fast & Flexible），是专为移动端定制的一套开箱即用的可视化解决方案，基于图形语法理论，具有精简、高性能、易扩展的特性，适用于对性能、大小、扩展性要求严苛的场景。

68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f726d73706f7274616c2f77567764584e694151756f7574435a59576e51682e67696668747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f726d73706f7274616c2f43434a676f454850686b526859654e685362484d2e67696668747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f726d73706f7274616c2f4b756d6667516f6e7755495779646664676a68632e67696668747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f726d73706f7274616c2f6c5852584e77457856617a636d70494a676276522e676966

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

安装

$ npm install @antv/f2

特性

  • ✔︎ 体验优雅：基于 AntV 完整的移动端可视化设计体系
  • ✔︎ 扩展灵活：可自定义 Shape、动画，图表组件灵活可配，满足无限创意
  • ✔︎ 绘制迅速：性能极致追求，针对移动设备做了大量的优化
  • ✔︎ 体积小巧：在支持丰富（45+）图表的基础上保持代码量的小巧

正在建设中

  • 多平台支持
  • label 功能组件
  • 更精致的动画以及丰富的图表交互

文档

快速开始

68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f726d73706f7274616c2f764e424e49477643694977714c7761596a5755792e706e67

<canvas id="c1"></canvas>
import F2 from '@antv/f2';

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 chart = new F2.Chart({
  id: 'c1',
  width: 375,
  height: 265,
  pixelRatio: window.devicePixelRatio
});

chart.source(data);
chart.interval().position('year*sales');
chart.render();

更多示例：demos。

手机扫码观看 demos

68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f726d73706f7274616c2f6e7a6c78497a55426c425256474d79615a6967472e706e67

本地开发

$ npm install

# 跑测试用例
$ npm run test-live

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

# 打开 demo
$ npm run demos

如何贡献

如果您在使用的过程中碰到问题，可以先通过 issues 看看有没有类似的 bug 或者建议。

如需提交代码，请遵从我们的贡献指南。

License

MIT license.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK