antvis / f2 Goto Github PK
View Code? Open in Web Editor NEW📱📈An elegant, interactive and flexible charting library for mobile.
Home Page: https://f2.antv.vision/zh
License: MIT License
📱📈An elegant, interactive and flexible charting library for mobile.
Home Page: https://f2.antv.vision/zh
License: MIT License
使用f2时,用ajax动态获取数据,图表不会立即render出来,只有点击了才渲染出来
是否可以提供几个典型的常用的react demo, 这样与html的对照,可以知道在react里面怎么写..
可以吗?
可以适用于 react web应用吗? 我是打算在钉钉微应用使用它.
目前只提供了 ES6 的源码,当用户在项目里配置了 babel-loader 忽略 node_modules 文件夹时,最终打包出来的文件有问题。
解决方案:
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.
平滑折线图
demo中,我无法知道哪条线是北京,哪条线是纽约
如题:请问g2-mobile目前是否属于开源项目,有开源协议么? 可否在商业项目中使用?
同样g2的Web PC版呢
获取饼图点击时对应的数据,目前只能通过 getSnapRecords 来获取,但是由于通用的逻辑都是通过 x 轴的位置来定位点击的最近的数据,而饼图经过了 stack 和 transpose ,所以需要通过 y 轴来判断位置。
所以需要给 getSnapRecords 增加一个参数,不易于理解和使用。
3.0 中这个接口报错。
通过绑定事件获取画布上的点,最好能在chart 上提供一个方法
一个柱状图,一个饼图,点击柱状图时,通过onshow来实现饼图的数据变化,饼图绘制出现问题
今天更新chrome到版本61.0.3163.79以后,带动画的图表显示不出来了。官网的示例也是显示不出来了
我是在angular2中使用g2-mobile,但是调用 destroy()
时会引发。
TypeError: Cannot read property 'stop' of null
代码位置:
clear: function() {
var t = this.animate; // thrown t = null
t.stop && t.stop()
}
一个重现的示例当离开页面时会收到一个 console.warn
。
F2中饼图、堆叠条形图如何实现类似G2中内部文本的效果?
G2 基础饼图-内部文本:https://antv.alipay.com/zh-cn/g2/3.x/demo/pie/innerlabel.html
另外多平台和图表功能完善预计多久可以完成?多谢!
你好刚打算做点击x轴,根据轴上月份获取相应数据,但目前在api、demo中尚未发现如何增加相关监听事件,请告知。
------------------------[以上已在api中获知]-------------------------
另外,不知是否可提供相关交流群,以供实时交流,获取相关资讯。
How to set the bar for each column width
我看到文档中有一个colorCallback,可以让用户自定义颜色,请问怎么让线条支持几种颜色渐变呢
如图,实际测试中,红色区域对应Support维度,黑色区域对应Design维度,橙色区域对应Development维度。
期望应该是每个维度的范围都和橙色一样大。黑色区域应当是现在的两倍大小,涵盖左侧区域。
复现地址 基本雷达图
获取的坐标 都相对起始角度的坐标 这个应该是bug吧?还是说要开发者自己去算?
const data = [
{x: 1, y: null},
{x: 2, y: 1},
{x: 3, y: 2}
];
chart.line().position('x*y');
原因:
解决方案:
chart.source(data, {y: {type: 'linear'});
怎么将数据值和名称展示在饼图上?
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);
});
如标题所描述,在柱状图上使用guide画一条目标线,由于目标线的值可能比目前柱状图上的数值都大的话,就无法看到目标线了,这个我翻看相关的文档,设置min和max发现并不生效。举例如类似这个的数据如果说目标线的值大于16就无法看到了:https://antv.alipay.com/zh-cn/f2/3.x/demo/bar/basic-column.html。请问该如何解决这个呢?
在移动端引入f2,想要实现点击图表某个点位,出现对应的提示框要怎么实现。
g2-mobile 版本 2.0.0
以官方demo为例。
第十五行改成var data = []
,再点击执行。当前标签页卡死。
期望绘制图表时,如果从数组中拿不到需要的数据能在控制台打印错误,不会卡死浏览器。
g2-mobile 只能用 id 值来指定图表容器,不支持通过 container 直接传入容器的 html 节点对象
在官网demo 双y轴尝试过了, 运行后设置的min, max也是没有生效
文档不够详细,以前没使用过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);
}
});
非常感谢!
辛苦了!大牛们!
华为荣耀9, mate9, mate9pro 原生浏览器 图表示例无法打开。。
其他版本的华为系浏览器没有测试。
测试了vivo,小米系列,没发现大问题。。
我的场景: 双轴图
当双轴图的第一根轴数据缺失,部分数据处理无法进行,不能进行绘制时,位于右侧的轴就会自动填补到左侧来。
期望能支持类似这样的写法:
chart.axis(dim,{
position:'right',
});
将坐标轴设定在右侧
引入显示undifine
区域图绘制光滑曲线时,若第一个数据值为null,则会报错,若是第一个数据除外的其他数据值为null则正常🤔
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()
这组代码:
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'} ];
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>
**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 是专门针对移动端图表的,我很喜欢,但是我现在的需求是需要在饼状图中空心处放一个图片,我看官网的例子并没有,可以提供一下方案吗
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.