antvis / f2 Goto Github PK

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

• F2 Version:
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:

获取的坐标 都相对起始角度的坐标 这个应该是bug吧？还是说要开发者自己去算？

http://runjs.cn/code/p7fbxymn

问题

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

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

3.0 中这个接口报错。

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

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

如题：请问g2-mobile目前是否属于开源项目，有开源协议么？ 可否在商业项目中使用？
同样g2的Web PC版呢

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

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

文档不够详细，以前没使用过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);
    }
  });

How to set the bar for each column width

• **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();
  

我是在angular2中使用g2-mobile，但是调用 destroy() 时会引发。

TypeError: Cannot read property 'stop' of null

代码位置：

            clear: function() {
                var t = this.animate; // thrown t = null 
                t.stop && t.stop()
            }

这是为何

在移动端引入f2,想要实现点击图表某个点位，出现对应的提示框要怎么实现。

引入显示undifine

g2-mobile 版本 2.0.0

https://segmentfault.com/q/1010000006891658

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

我看到文档中有一个colorCallback，可以让用户自定义颜色，请问怎么让线条支持几种颜色渐变呢

• F2 Version: all
• Platform: all

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

解决方案：

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

• F2 Version:
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:

• F2 Version: 3.0.2-beta
• Platform: all

在官网demo 双y轴尝试过了, 运行后设置的min, max也是没有生效

如图，一个项目的文字过长就会出现这种现象，请问如何才能换行显示

是这样的由于业务需求，只需要部分图标绘制主题，而整个包体量太大，希望有源码可以自由压缩。

我的场景: 双轴图

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

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

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

• 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);
  });

如图，实际测试中，红色区域对应Support维度，黑色区域对应Design维度，橙色区域对应Development维度。

期望应该是每个维度的范围都和橙色一样大。黑色区域应当是现在的两倍大小，涵盖左侧区域。

复现地址 基本雷达图

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

怎么将数据值和名称展示在饼图上？

比如这样。但是我用了实际收益和预期收益对比这张图。但是我如果拿掉data里的时间的话 图表就会错乱比如这样

有什么配置方法是配置两根线的呢？

请问下如何去除原本axis所占的空白位，占满整个canvas，见下图

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

平滑折线图
demo中，我无法知道哪条线是北京，哪条线是纽约

示例代码给出的

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

是否可以提供几个典型的常用的react demo, 这样与html的对照,可以知道在react里面怎么写..
可以吗?

可以适用于 react web应用吗? 我是打算在钉钉微应用使用它.

以官方demo为例。
第十五行改成var data = []，再点击执行。当前标签页卡死。
期望绘制图表时，如果从数组中拿不到需要的数据能在控制台打印错误，不会卡死浏览器。

不加animate属性前正常：

加animate属性后问题：

• F2 Version:
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:https://codepen.io/huangxiangpopo/pen/deJdrY

一个柱状图，一个饼图，点击柱状图时，通过onshow来实现饼图的数据变化，饼图绘制出现问题

• F2 Version:3.1.3-beta.1

• Platform:mac os 10.13.4

• Mini Showcase(like screenshots):
  

• CodePen Link:

• F2 Version:3.1
• Platform:all
• Mini Showcase(like screenshots):
• CodePen Link:https://codepen.io/anon/pen/Zrwvmx

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

• F2 Version: 3.0.3
• Platform: React Native Android API Level 23 Webview

F2中饼图、堆叠条形图如何实现类似G2中内部文本的效果？

G2 基础饼图-内部文本：https://antv.alipay.com/zh-cn/g2/3.x/demo/pie/innerlabel.html

另外多平台和图表功能完善预计多久可以完成？多谢！

g2-mobile 只能用 id 值来指定图表容器，不支持通过 container 直接传入容器的 html 节点对象

这组代码：
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'} ];

今天更新chrome到版本61.0.3163.79以后，带动画的图表显示不出来了。官网的示例也是显示不出来了

• F2 Version:
• Platform:
• Mini Showcase(like screenshots):
• CodePen Link:

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

使用f2时，用ajax动态获取数据，图表不会立即render出来，只有点击了才渲染出来

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