antvis / g2 Goto Github PK
View Code? Open in Web Editor NEW📊 The concise and progressive visualization grammar.
Home Page: https://g2.antv.antgroup.com
License: MIT License
📊 The concise and progressive visualization grammar.
Home Page: https://g2.antv.antgroup.com
License: MIT License
frame = Frame.combinColumns(frame, ['highPress', 'lowPress', 'pulseRate'], 'value', 'vv', 'date');
highPress这些需要显示中文(⊙﹏⊙)b
在source方法 defs 里面设置type:cat value:xx 不行
使用chart.legend 没看到有这个设置
像 Demo 中提供的功能,在右上角显示一个保存为图片的按钮。
目前是否提供这个功能?还是需要自己实现?
如题
webpack 压缩打包时卡死求解,不知道有人遇到过没?不压缩可以正常用。
由于使用了webpack,直接引用线上地址无效,所以想问一下是否有通过npm安装插件的方法,谢谢。
希望Chart类能提供图片导出的方法。
目前似乎必须自己把三层Canvas合并然后用 toDataURL() 保存。
用了BootStrap的前端,再用G2的时候,设定的高度和宽度一直不起作用,另外怎么实现响应式的宽度和高度(保持长宽比例)?
我用的是2.1.3,调用changeData之后,有一定概率不能重绘,试了很多次,发现重绘失败的概率大概是10%左右,当重绘失败(停止)之后,如果将鼠标移动到canvas区域,会继续重绘成功。
如所附图片,changeData之后,如果重绘失败了,会卡在动画的途中,仔细看每个柱子的下方,发现重绘已经开始了,只是没有完成,卡在这了。
` var data = [
{action: '访问', visitor: 500},
{action: '浏览', visitor: 400},
{action: '交互', visitor: 300},
{action: '下单', visitor: 200},
{action: '付款', visitor: 100}
];
var chart = new G2.Chart({
id: 'root',
width : 800,
height : 400
}); // 创建图表
chart.source(data); // 载入数据源
chart.interval().position('action*visitor').color('action'); // 使用图形语法绘制柱状图
chart.render();
data = [
{action: '访问', visitor: 200},
{action: '浏览', visitor: 300},
{action: '交互', visitor: 350},
{action: '下单', visitor: 400},
{action: '付款', visitor: 120}
];
setTimeout(function(){
chart.changeData(data);
}, 1000);`
Hi G2 Team,
Your framework look awesome, great job! 👍
Would it be possible to have a english documentation ?
折线图。偶发出现
Uncaught TypeError: h is not a function
错误。
chart.render()已经正常调用
建议:
g2 能不能对外暴露一个error的监听接口。比如,对于出现的未知错误,有时候限于稳定性和时间要求,对于g2版本升级会相对谨慎,这时可以通过error做出统一处理,比如重绘等等。
看文档里面看到了这个方法,虽然这好像不是开源的一部分,但是求众数的英文单词应该是mode,这里为什么用model呢?是因为mode和其他什么冲突么?
@lifesinger 如题,使用教程里推荐的自定义API:
chart.tooltip(true, {
custom: true, // 表示使用自定义的模板显示 tooltip
html: '<div class="chart-tooltip" style="position:absolute;visibility: hidden;"><span class="ac-title"></span>:00<table class="ac-list custom-table"></table></div>', // tooltip 的 html 外层模板
itemTpl: '<tr><td>{index}</td><td>{name}:</td><td>{value}元</td></tr>', // 使用 html 时每一个显示项的模板,默认支持 index, color, name, value 这四个字段。
offset: 50, // 偏移量,设置tooltip 显示位置距离 x 轴方向上的偏移
//customFollow: false // 设置 tooltip 是否跟随鼠标移动,默认为 true,跟随。
});
g2 关系图 / 结构树中,当只有一个或者两个节点时,节点会偏移到左下角,
此时 应该默认竖直居中比较合适
链接如下
https://g2.alipay.com/demo/13-link/tree.html
1、当仅有一个节点时
var data = [{
"name": "flare",
}];
2、当有两个节点时
var data = [{
"name": "flare",
"children": [{
"name": "child",
}]
}];
如题,想绘制韦恩图。
目前较能用的绘制方法是使用d3.js,在echarts2.0也有一个简单的,但是echarts3.0后就给砍了,不知道G2可不可以绘制,谢谢。
使用 changeData() 方法更新数据以后,有什么办法可以让新老图形的变化之间有过渡动画?
Hi G2 Team,
I'm recently struggling to change the title value of the tooltip. The tooltip only select the value of one axis and can't be (or at least I didn't find a way to) customized.
As you can see I change the format of the x axis but the tooltip still show the raw value of the x axis.
Could we have a formatter property like the one for axis but for the tooltip title ?
Thank you.
when all values are null or zero, I encounter this issue.
example:
<div id="c1"></div>
<script>
var data = [
{"date":"21:00","value":null},
{"date":"22:00","value":0},
{"date":"23:00","value":0},
{"date":"00:00","value":null},
{"date":"01:00","value":null},
{"date":"02:00","value":null},
{"date":"03:00","value":null},
{"date":"04:00","value":null},
{"date":"05:00","value":null},
{"date":"06:00","value":null},
{"date":"07:00","value":null},
{"date":"08:00","value":null}];
var chart = new G2.Chart({
id: 'c1',
width: 1000,
height: 500
});
var defs = {
};
chart.source(data, defs);
chart.line().position('date*value').size(2);
chart.render();
</script>
我看 index.js 里还是 uglify 后的代码。
应该是 combineColumns?
https://g2.alipay.com/demo/05-pie/donut.html
Uncaught TypeError: Cannot read property 'maxY' of undefined
i.augment.drawInner @ g2.js:6
r.augment.draw @ g2.js:3
(anonymous function) @ g2.js:3
s.each @ g2.js:8
。。。
当鼠标位于元素上时希望鼠标变为pointer, 怎么实现?
另外:文档能否提供搜索功能(>_<)
饼图我用char.changeData()更新成功,分层分组的柱状图这种方法数据直接没有了..
我已经查过了教程中tooltip的用法,并实现了在tooltip中画另一张图,现在想添加额外数据到tooltip的文字描述里,请问有相应的办法么?
Hi, I'm using G2 Range plugin combining two charts as below:
var chart1 = new G2.Chart({...});
var chart2 = new G2.Chart({...});
var range = new G2.Plugin.range({
id: 'range',
// ...
});
range.link([chart1, chart2]);
range.render();
But when I tried to destroy these objects as below:
chart1.destroy();
chart2.destory();
range.destory();
<div id="range">...</div>
did not remove its children DOM.
Currently my solution is remove these DOM with jQuery:
$('#range').children().remove();
Is that a bug or I'm not using it properly?
格式化了下代码有两万多行,好多啊!可以把没混淆的代码开源吗,学习学习:smiley:
http://echarts.baidu.com/demo.html#map-china-dataRange
有类似于这样的支持多组数据的地图demo么?
现在ev对象里面的数据,不知道怎么判断当前的鼠标是否悬停在某个shape上。
Hi, great work!
Would you be able to publish the original source code?
Minified index.js doesn't give much confidence.
折线图,如何展示{time: "08-10", expValue: "20", realValue: "19"}这样格式的数据。
难道要处理成:[{time: "08-10", value: "20"}, {time: "08-10", value: "19"}]这样的数据?
看着就不是很合理的数据整合。
G2 2.2.0,
『微小,但是美好的改变。』
详见 更新日志。
G2 为你而来
感谢所有关注和使用 G2 的朋友们!~
G2 官网: https://g2.alipay.com/
在光滑的折现图的demo中
将data修改如下
var data = [
{name: '2012-2013 冬', time: Date.UTC(1970, 9, 21), value: 0},
{name: '2013-2014 冬', time: Date.UTC(1970, 9, 21), value: 0.28}
];
出现 Uncaught max not equal to min
报错
var frame = new Frame(data.timelineData);
frame = Frame.combinColumns(frame, ['fb', 'rq', 'tcp', 'dns', 'pgrd', 'dmrd', 'psdm'], 'value', 'type', ['date']);
var chart = new G2.Chart({
id: 'J_Chart',
forceFit: true,
height: 400
});
chart.source(frame, {
date: {
alias: '时间',
tickCount: 20
},
value: {
alias: '加载时长'
},
type: {
type: 'cat',
values: ['白屏时长','请求页面时长','TCP连接时长','DNS查找时长','页面加载完成时长','Dom树加载完成时长','Dom树解析时长']
}
});
chart.legend({
title: null,
position: 'bottom',
dy: 10
});
chart.line().position('date*value').color('type', function(value) {
console.log(value);
if(value === '白屏时长') {
return 'red'
}else {
return 'blue';
}
});
chart.render();
color方法里打印出来的全是白屏时长,是哪里设置不对么?
官方的例子中只有全国的地图数据,但是没有省市的地图数据呢
line 的 Geom 在 event的交互我遇到了以下問題:
建議:因為多group的情境實際上每個event觸發點會有多個資料點(y),那是否能只回傳x軸的值?
其实导出功能还是很常用的一个功能。
最好实例能够有一个API,以便获取图表的base64
非常感谢
原谅我把这里当作了问问题的地方,但暂时我们好像还没有一个类似地方吧。
是这样的情况,我使用了china 的geojson 在一个view上绘制了地图。然后我在另外一个view上使用数据绘制热点图后,热点图的位置,与地图并不重合。
现在我暂时还没有想到办法把两者的地图坐标系重合。
步骤:
[{ name: 'a', value: 1 }, { name: 'b', value: 2 }, { name: 'c', value: 3 } ]
[{ name: 'b', value: 1 }, { name: 'a', value: 2 }, { name: 'c', value: 3 } ]
显示顺序还是 a b c 而我要的顺序是b a c 有解决此问题的配置项或处理方法么
这个render的方式是基于DOM的。有没有计划做一个React的封装?
当然没有封装这样也可以在React里用,但总是麻烦一点。并且你们ant.design也是有完整React组建的,不知道是不是考虑呢?
(function (exports, require, module, __filename, __dirname) { !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("G2",[],e):"object"==typeof exports?exports.G2=e():t.G2=e()}(this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return t[r].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}(function(t){for(var e in t)if(Object.prototype.hasOwnProperty.call(t,e))switch(typeof t[e]){case"function":break;case"object":t[e]=function(e){var n=e.slice(1),r=t[e[0]];return function(t,e,i){r.apply(this,[t,e,i].concat(n))}}(t[e]);break;default:t[e]=t[t[e]]}return t}([function(t,e,n){"use strict";var r={};r.Chart=n(307),r.Util=n(1),r.Global=n(5),r.Stat=n(19),r.Stat.map=n(216),r.Stat.tree=n(221),r.Stat.treemap=n(224),n(214),r.Scale=n(80),r.Shape=n(102),r.Frame=n(2),r.Theme=n(47),
ReferenceError: document is not defined
[1] at /Users/cunde/Code/kepler/dashbord/node_modules/g2/index.js:1:6745
[1] at Object.<anonymous (/Users/cunde/Code/kepler/dashbord/node_modules/g2/index.js:1:6795)
[1] at e (/Users/cunde/Code/kepler/dashbord/node_modules/g2/index.js:1:319)
[1] at Object.r (/Users/zoucunde/Code/kepler/dashbord/node_modules/g2/index.js:1:17168)
[1] at e (/Users/cunde/Code/kepler/dashbord/node_modules/g2/index.js:1:319)
[1] at Object. (/Users/cunde/Code/kepler/dashbord/node_modules/g2/index.js:1:19042)
[1] at e (/Users/cunde/Code/kepler/dashbord/node_modules/g2/index.js:1:319)
[1] at Object. (/Users/cunde/Code/kepler/dashbord/node_modules/g2/index.js:4:19805)
[1] at e (/Users/cunde/Code/kepler/dashbord/node_modules/g2/index.js:1:319)
[1] at Object.
HH:mm:ss格式化显示出的分钟数都是06分
时间坐标显示有问题
格式化时间需要用 HH:MM:ss
部分数据看不到,在纵坐标之上。
Example
<div id="c1"></div>
<script>
var data = [
{"date":"08:25","value":null,"type":"group2"},{"date":"08:30","value":"625","type":"group2"},{"date":"08:35","value":"625","type":"group2"},{"date":"08:40","value":"625","type":"group2"},{"date":"08:45","value":"625","type":"group2"},{"date":"08:50","value":"625","type":"group2"},{"date":"08:55","value":"625","type":"group2"},{"date":"09:00","value":"625","type":"group2"},{"date":"09:05","value":"625","type":"group2"},{"date":"09:10","value":"625","type":"group2"},{"date":"09:15","value":"500","type":"group2"},{"date":"09:20","value":"0","type":"group2"},{"date":"08:25","value":null,"type":"group3"},{"date":"08:30","value":"155303","type":"group3"},{"date":"08:35","value":"153237","type":"group3"},{"date":"08:40","value":"159982","type":"group3"},{"date":"08:45","value":"150401","type":"group3"},{"date":"08:50","value":"223911","type":"group3"},{"date":"08:55","value":"154034","type":"group3"},{"date":"09:00","value":"365878","type":"group3"},{"date":"09:05","value":"168086","type":"group3"},{"date":"09:10","value":"150066","type":"group3"},{"date":"09:15","value":"157892","type":"group3"},{"date":"09:20","value":"333971","type":"group3"},{"date":"08:25","value":null,"type":"group1"},{"date":"08:30","value":"625","type":"group1"},{"date":"08:35","value":"250","type":"group1"},{"date":"08:40","value":"0","type":"group1"},{"date":"08:45","value":"0","type":"group1"},{"date":"08:50","value":"0","type":"group1"},{"date":"08:55","value":"0","type":"group1"},{"date":"09:00","value":"0","type":"group1"},{"date":"09:05","value":"0","type":"group1"},{"date":"09:10","value":"0","type":"group1"},{"date":"09:15","value":"0","type":"group1"},{"date":"09:20","value":"0","type":"group1"},{"date":"08:25","value":null,"type":"group4"},{"date":"08:30","value":"24883","type":"group4"},{"date":"08:35","value":"27669","type":"group4"},{"date":"08:40","value":"25358","type":"group4"},{"date":"08:45","value":"30229","type":"group4"},{"date":"08:50","value":"25457","type":"group4"},{"date":"08:55","value":"27976","type":"group4"},{"date":"09:00","value":"25526","type":"group4"},{"date":"09:05","value":"27948","type":"group4"},{"date":"09:10","value":"24848","type":"group4"},{"date":"09:15","value":"28017","type":"group4"},{"date":"09:20","value":"25041","type":"group4"},{"date":"08:25","value":null,"type":"group5"},{"date":"08:30","value":"1270","type":"group5"},{"date":"08:35","value":"1270","type":"group5"},{"date":"08:40","value":"1270","type":"group5"},{"date":"08:45","value":"1270","type":"group5"},{"date":"08:50","value":"1270","type":"group5"},{"date":"08:55","value":"1270","type":"group5"},{"date":"09:00","value":"1270","type":"group5"},{"date":"09:05","value":"1270","type":"group5"},{"date":"09:10","value":"1270","type":"group5"},{"date":"09:15","value":"1270","type":"group5"},{"date":"09:20","value":"1270","type":"group5"},{"date":"08:25","value":null,"type":"group6"},{"date":"08:30","value":"1270","type":"group6"},{"date":"08:35","value":"1270","type":"group6"},{"date":"08:40","value":"1270","type":"group6"},{"date":"08:45","value":"2752","type":"group6"},{"date":"08:50","value":"1270","type":"group6"},{"date":"08:55","value":"1270","type":"group6"},{"date":"09:00","value":"1270","type":"group6"},{"date":"09:05","value":"1270","type":"group6"},{"date":"09:10","value":"1270","type":"group6"},{"date":"09:15","value":"1270","type":"group6"},{"date":"09:20","value":"1270","type":"group6"},{"date":"08:25","value":null,"type":"group7"},{"date":"08:30","value":"94585","type":"group7"},{"date":"08:35","value":"94933","type":"group7"},{"date":"08:40","value":"101213","type":"group7"},{"date":"08:45","value":"92229","type":"group7"},{"date":"08:50","value":"162855","type":"group7"},{"date":"08:55","value":"95550","type":"group7"},{"date":"09:00","value":"302451","type":"group7"},{"date":"09:05","value":"109539","type":"group7"},{"date":"09:10","value":"91889","type":"group7"},{"date":"09:15","value":"99867","type":"group7"},{"date":"09:20","value":"272026","type":"group7"}
];
var chart = new G2.Chart({
id: 'c1',
width: 1000,
height: 500
});
var defs = {
};
chart.source(data, defs);
chart.line().position('date*value').color('type').size(2);
chart.render();
</script>
原已关闭问题,未解决#8
这个错误只会在<单点 && type= time >时出现,其他的type并没有,
chart.source(data, {
time: {
type: 'time',
mask: 'mm-dd',
alias: '日期'
},
对于单个值的处理time类型的适配坐标轴范围时,对于max和min值是同一个值, 处理有错误,
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.