Git Product home page Git Product logo

f2's Introduction

npm package NPM downloads Percentage of issues still open

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、动画以及交互的自定义能力,当然还有图表样式的个性化定制,满足各种个性化的图表要求。

文档

快速开始

<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.

f2's People

Contributors

acery1 avatar afc163 avatar antimoron avatar army8735 avatar benvirus avatar buggmaker avatar cweili avatar cycgit avatar dengfuping avatar dependabot-preview[bot] avatar dxq613 avatar edokeh avatar el-chiang avatar esorakouki avatar fjc0k avatar icmi avatar jiangxiaoxin avatar leungwensen avatar lomo10 avatar mshmyw avatar scaletimes avatar simaq avatar susiwen8 avatar tangying1027 avatar thundernet8 avatar wadezhan avatar wangqi200 avatar yiliang114 avatar zach41 avatar zengyue avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

f2's Issues

饼图 getSnapRecords 取值问题

  • F2 Version: 3.1.0
  • Platform:
  • Mini Showcase(like screenshots):
  • CodePen Link:
const data = [
    { "uKey": "1",percent": 0.2771,const": "const" },
    { "uKey": "2", "percent": 0.18083, "const": "const" },
    { "uKey": "3", "percent": 0.14108, "const": "const" },
    { "uKey": "4", "percent": 0.13868, "const": "const" },
    { "uKey": "5", "percent": 0.05662, "const": "const" },
    { "uKey": "6", "percent": 0.05523, "const": "const" },
    { "uKey": "7", "percent": 0.03355, "const": "const" },
    { "uKey": "8", "percent": 0.03079, "const": "const" },
    { "uKey": "9", "percent": 0.02864, "const": "const" },
    { "uKey": "10", "percent": 0.01879, "const": "const" },
    { "uKey": "11", "percent": 0.03869, "const": "const" }
  ];

  const chart = new F2.Chart({
    id: 'mountNode',
    width: window.innerWidth,
    height: window.innerWidth * 0.64,
    pixelRatio: window.devicePixelRatio,
    padding: [ 50, 'auto' ]
  });

  chart.source(data);
  chart.legend(false);
  chart.coord('polar', {
    transposed: true,
    inner: 0.6
  });
  chart.axis(false);
  chart.interval().position('const*percent').color('percent', (v, i) => {
    return `rgba( 255 ,0 ,0 , ${((v[1] - v[0]) * 3).toFixed(3)} )`;
  }).adjust('stack');
  chart.render();

  document.querySelector('#mountNode').addEventListener('click', e => {
      let {left: x, top: y} = e.target.getBoundingClientRect();
      x = event.clientX - x;
      y = event.clientY - y;
      console.log(chart.getSnapRecords({x, y}, 'percent')[0]._origin);
  });

npm安装的f2报错

Hi,我在使用这段代码时报这个错误:[Vue warn]: Error in mounted hook: "TypeError: canvas.getContext is not a function",我的f2是用npm安装的,请问这是什么问题呢

const chart = new F2.Chart({
      id: 'c1',
      width: 852,
      height: 136
    })
    const data = [{ a: 1, b: 1 }, { a: 2, b: 2 }]

    chart.source(data)
    chart
      .point()
      .position('a*b')
      .size(1)
    chart.render()

怎么关联两个图表?

image
像上面的图通过f2怎么实现,能实现坐标系的关联吗?echarts上可以关联两个坐标系,第一次用f2。

无法形成一个完整的闭环

这组代码:
GM.Global.pixelRatio = 6; var data = [ {a: '1', b: 0.833403, c: '1'}, {a: '1', b: 0.041649, c: '2'}, {a: '1', b: 0.041649, c: '3'}, {a: '1', b: 0.041649, c: '4'}, {a: '1', b: 0.04165, c: '5'} ]; var chart = new GM.Chart({ id: 'c1' }); chart.source(data); chart.coord('polar', { transposed: true, inner: 0.6 }); chart.axis(false); chart.intervalStack().position('a*b').color('c'); chart.animate().wavec(); chart.render();
没法形成一个完整的闭环,如果数据的顺序移动一下则可以,如:

var data = [ {a: '1', b: 0.033403, c: '1'}, {a: '1', b: 0.841649, c: '2'}, {a: '1', b: 0.041649, c: '3'}, {a: '1', b: 0.041649, c: '4'}, {a: '1', b: 0.04165, c: '5'} ];

F2 柱状图 如果设置的目标线比目前所有的数据都大就看不到目标线

如标题所描述,在柱状图上使用guide画一条目标线,由于目标线的值可能比目前柱状图上的数值都大的话,就无法看到目标线了,这个我翻看相关的文档,设置min和max发现并不生效。举例如类似这个的数据如果说目标线的值大于16就无法看到了:https://antv.alipay.com/zh-cn/f2/3.x/demo/bar/basic-column.html。请问该如何解决这个呢?

按需引入时的打包问题

  • F2 Version: all
  • Platform: all

目前只提供了 ES6 的源码,当用户在项目里配置了 babel-loader 忽略 node_modules 文件夹时,最终打包出来的文件有问题。

解决方案:

  1. 在 webpack 配置里,把 f2 加到 babel 的打包列表中;
  2. 提供一个 ES5 版本的源码 lib 文件夹

getSnapRecords 在饼图出错,不好用

问题

获取饼图点击时对应的数据,目前只能通过 getSnapRecords 来获取,但是由于通用的逻辑都是通过 x 轴的位置来定位点击的最近的数据,而饼图经过了 stack 和 transpose ,所以需要通过 y 轴来判断位置。

所以需要给 getSnapRecords 增加一个参数,不易于理解和使用。

3.0 中这个接口报错。

通过绑定事件获取画布上的点,最好能在chart 上提供一个方法

还望细化文档,非常感谢!

文档不够详细,以前没使用过G2/G6,现在来使用F2看到demo,但是demo里面的看到很多参数去F2的文档里面找不到。
对我来说,初学使用还有些困难。
例如这段 tooltip的使用我在文档上也没有找到。

chart.tooltip({
    custom(obj) {
      const legend = chart.get('legendController').legends.top[0];
      const tooltipItems = obj.items;
      const legendItems = legend.items;
      const map = {};
      legendItems.map(item => {
        map[item.name] = _.clone(item);
      });
      tooltipItems.map(item => {
        const { name, value } = item;
        if (map[name]) {
          map[name].value = value;
        }
      });
      legend.setItems(Object.values(map));
    },
    onHide(tooltip) {
      const legend = chart.get('legendController').legends.top[0];
      legend.setItems(chart.getLegendItems().country);
    }
  });

非常感谢!
辛苦了!大牛们!

Be compatible between `g2` and `f2`?

When I read the chart by g2 directly in mobile side , the chart disappeared.
Should I take f2 as a total uncorrelated library to g2? As I read the docs, it seems that you do take them as two independent/separate libraries.

If I want to make my code be compatible between g2 and f2?
What else should I do? Would there be an instruction?
Like

1. change g2 to  f2 
2. change the element to <canvas>
...
Done

Especially for facet concept.

关于图形点击事件

你好刚打算做点击x轴,根据轴上月份获取相应数据,但目前在api、demo中尚未发现如何增加相关监听事件,请告知。
------------------------[以上已在api中获知]-------------------------
另外,不知是否可提供相关交流群,以供实时交流,获取相关资讯。

VUE中使用chart.guide().text 方法报错

vue.esm.js?efeb:591 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property '0' of null"

found in

---> <MountNode1> at src/components/chars/MountNode1.vue
       <App> at src/App.vue
         <Root>
<!--气泡图-->
<template>
  <div style="width:600px; height:500px; margin: 0 auto;">
    <canvas :id="'mountNode' + charid" width="600" height="400"></canvas>
  </div>
</template>
<script>
export default {
  name: 'MountNode1',
  data () {
    return {

    }
  },
  props: ['charid'],
  mounted(){
    const data = [
      { x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' },
      { x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany' },
      { x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland' },
      { x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands' },
      { x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden' },
      { x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' },
      { x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France' },
      { x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway' },
      { x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom' },
      { x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy' },
      { x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia' },
      { x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' },
      { x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary' },
      { x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal' },
      { x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand' }
    ];
    const chart = new this.$$f2.Chart({
      id: 'mountNode'+ this.charid,
      padding: [20, 20, 50, 60],
      pixelRatio: window.devicePixelRatio
    });
    chart.source(data, {
      y: {
        min: 0
      },
      x: {
        max: 100
      }
    });

    chart.point().position('x*y')
      .size('z', [10, 40])
      .color('#3182bd')
      .shape('circle')
      .style({
        opacity: 0.7
      });

    // F2 没有提供 riddle 所以需要用户使用guide 来生成文本
    data.forEach(obj => {
      chart.guide().text([obj.x, obj.y], obj.name, {
        textAlign: 'center',
        fontSize: 14,
        textBaseline: 'middle'
      });
    });
    chart.render();
  }
}
</script>


<style scoped lang="less">

</style>



绘制线图时第一条数据的 y 轴的值为 null 时,绘制不出来

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

chart.line().position('x*y');

原因:

  • F2 根据第一条数据的字段值进行类型的判定,如果是 Null 那么无法判定字段类型。

解决方案:

  • 可以手工设置 数据的类型
      chart.source(data, {y: {type: 'linear'});
  • 修改代码,如果判定第一条数据的对应字段值为 null ,则继续往下查找,找到一个非 null 的值

area 渐变问题,opacity怎么修改。

增加了线条和区域的渐变属性
image

image
但是区域的渐变色值明显是有opacity的。
请问这个opacity在哪里可以修改,在F2的文档没有找到。或者怎么可以还原设置的色值。

shape of smooth

区域图绘制光滑曲线时,若第一个数据值为null,则会报错,若是第一个数据除外的其他数据值为null则正常🤔

找不到示例代码所用的API

image

image
示例代码给出的

 const legend = chart.get('legendController').legends.top[0];

在chart的get方法里没找到对应的参数。
legendController是什么 top[0]是什么意思?是指多个图例中的第一个图例吗?

希望可以支持将y轴设在右侧

我的场景: 双轴图

当双轴图的第一根轴数据缺失,部分数据处理无法进行,不能进行绘制时,位于右侧的轴就会自动填补到左侧来。

期望能支持类似这样的写法:

chart.axis(dim,{
    position:'right',
});

将坐标轴设定在右侧

f2 华为原生浏览器 无法渲染。

华为荣耀9, mate9, mate9pro 原生浏览器 图表示例无法打开。。
其他版本的华为系浏览器没有测试。
测试了vivo,小米系列,没发现大问题。。

VUE中引入antv/f2不可用,报错 Cannot read property 'addGroup' of undefined

  • **F2 Version3.1.1:
    代码如下【和实例代码一致】
    html: <canvas id="c1" width="400" height="260">
    script:
    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();
    

F2如何在饼状图中引入一个图片

因为f2 是专门针对移动端图表的,我很喜欢,但是我现在的需求是需要在饼状图中空心处放一个图片,我看官网的例子并没有,可以提供一下方案吗

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.