Code Monkey home page Code Monkey logo

g2's Introduction

English | 简体中文

G2 5.0

G2 is a visualization grammar for dashboard building, data exploration and storytelling.

Build Status Coverage Status npm Version npm Download npm License

examples

G2 is named after Leland Wilkinson’s book The Grammar of Graphics and was profoundly inspired by it in the very beginning. Here are some resources you can begin with:

  • Introduction - a brief overview and G2's motivations
  • Examples - a large number of demos to learn from and copy-paste
  • Tutorials - interactive case-driven guides of G2's core concepts
  • API Reference - complete documentation for all visualization components

✨ Features

  • Progressive Usage - The main objective of G2 is to help you get meaningful visualizations quickly with concise declarations and it infers the rest. But you can configure much more for complex and advanced situations.
  • Declarative API - We employs a functional declarative API to specify chart options in a programmatic fashion, which contributes to better logic reuse and more flexible code organization.
  • High Extensibility - To satisfy specific needs, G2 provides a convenient and consistent mechanism to extend everything you can imagine, whether a scale, a transform, a mark, etc,. You can even customize a brand new visualization tool based on this mechanism.
  • Comprehensive Grammar - G2 rejects a chart typology in favor of marks, transforms, scales, coordinates, and compositions. In addition to static visual representations, it's possible to declare data-driven animations and apply well-designed action-based interactions to plots as well.
  • Powerful Renderer - There is a powerful renderer G under G2 to generate web-based visualizations using Canvas, SVG or WebGL. The plenty of plugins it has benefit G2 from rendering charts with novel styles such as hand-drawn and fully embracing the ecosystem of D3.

🔨 Getting Started

G2 is usually installed via a package manager such as npm or Yarn.

$ npm install @antv/g2
$ yarn add @antv/g2

The Chart object then can be imported from G2.

<div id="container"></div>
import { Chart } from '@antv/g2';

// A tabular data to be visualized.
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

// Instantiate a new chart.
const chart = new Chart({
  container: 'container',
});

// Specify visualization.
chart
  .interval()                   // Create an interval mark and add it to the chart.
  .data(data)                   // Bind data for this mark.
  .encode('x', 'genre')         // Assign genre column to x position channel.
  .encode('y', 'sold')          // Assign sold column to y position channel.
  .encode('color', 'genre');    // Assign genre column to color channel.

// Render visualization.
chart.render();

If all goes well, you can get the following lovely bar chart!

example

🌍 Ecosystem

📮 Contributing

code

📄 License

MIT@AntV.

g2's People

Contributors

aarebecca avatar afc163 avatar ai-qing-hai avatar arranzeyuwang avatar bbsqq avatar bencorry avatar chenkun1997 avatar chenshuai2144 avatar cipchk avatar dependabot-preview[bot] avatar dxq613 avatar elaine1234 avatar frezc avatar guisturdy avatar hustcc avatar lessmost avatar leungwensen avatar lxfu1 avatar maplor avatar paleface001 avatar pddpd avatar pearmini avatar pepper-nice avatar rainy-25ghz avatar runtus avatar simaq avatar visiky avatar xcy960815 avatar xiaoiver avatar xile611 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

g2's Issues

纵坐标max比数据最大值小

部分数据看不到,在纵坐标之上。

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>

折线图自定义了tooltip后,画布边界的tooltip显示会越界(不能像默认的tooltip自动显示到可视区域)

@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,跟随。
        });

截屏参见如下:
screen shot 2016-09-14 at 00 49 03

Full source code

Hi, great work!

Would you be able to publish the original source code?
Minified index.js doesn't give much confidence.

Uncaught max not equal to min

光滑的折现图的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报错

Uncaught TypeError: Cannot read property 'points' of undefined

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>

柱状图changeData传入有序数组。显示无序

步骤:

  • chart source时传入一有序数组如
    [{ name: 'a', value: 1 }, { name: 'b', value: 2 }, { name: 'c', value: 3 } ]
    显示顺序是a b c
  • changeData时传入有序数组如
    [{ name: 'b', value: 1 }, { name: 'a', value: 2 }, { name: 'c', value: 3 } ]

显示顺序还是 a b c 而我要的顺序是b a c 有解决此问题的配置项或处理方法么

怎样控制鼠标形状

当鼠标位于元素上时希望鼠标变为pointer, 怎么实现?

另外:文档能否提供搜索功能(>_<)

tooltip如何自定义额外数据

我已经查过了教程中tooltip的用法,并实现了在tooltip中画另一张图,现在想添加额外数据到tooltip的文字描述里,请问有相应的办法么?

legend未选中字体大小怎么改?

qq 20161013104937

如图:

chart.legend('name', {
  word: {
    fill: '#424242',
    fontSize: 14
  },
  itemWrap: true,
  position: 'bottom'
});

未选中的不生效!
如果开源还能自己去找找源码,现在完全无头绪:joy:

destory方法报错

image

在react中使用
用react-router跳转时 会自动调用destory方法 然后报上面的错。
我暂时只有把销毁这行注释掉。
componentWillUnmount() {
// this.chart.destroy();
this.chart = null;
this.chartId = null;
}

请问有考虑过韦恩图么?

如题,想绘制韦恩图。
目前较能用的绘制方法是使用d3.js,在echarts2.0也有一个简单的,但是echarts3.0后就给砍了,不知道G2可不可以绘制,谢谢。

Uncaught TypeError: h is not a function

折线图。偶发出现
Uncaught TypeError: h is not a function 错误。
chart.render()已经正常调用

建议:
g2 能不能对外暴露一个error的监听接口。比如,对于出现的未知错误,有时候限于稳定性和时间要求,对于g2版本升级会相对谨慎,这时可以通过error做出统一处理,比如重绘等等。

图像导出保存

希望Chart类能提供图片导出的方法。
目前似乎必须自己把三层Canvas合并然后用 toDataURL() 保存。

G2 2.2.0 发布

G2 2.2.0,

『微小,但是美好的改变。』

一、丰富可视化交互形式

选择: 图形的单选、多选以及框选

geom-select

geom-multiple

range-select

筛选:新添图例单选模式、连续图例筛选、混合图表图例筛选以及数据范围选择条

legend-single

continous-legend

multi-chart

slider

高亮:支持图例鼠标 hover 高亮。

legend-hover

二、丰富可视化表现形式

支持弧长链接图和弦图以及桑基图 的绘制。

QQ20161208-0
QQ20161208-1
QQ20161208-2
QQ20161208-3

详见 更新日志

说明: 2.2.0 版本完全向下兼容,请放心升级使用。

G2 为你而来
感谢所有关注和使用 G2 的朋友们!~

g2-log

G2 官网: https://g2.alipay.com/

changeData之后重绘问题

我用的是2.1.3,调用changeData之后,有一定概率不能重绘,试了很多次,发现重绘失败的概率大概是10%左右,当重绘失败(停止)之后,如果将鼠标移动到canvas区域,会继续重绘成功。
如所附图片,changeData之后,如果重绘失败了,会卡在动画的途中,仔细看每个柱子的下方,发现重绘已经开始了,只是没有完成,卡在这了。
qq 20161116171249

` 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);`

绘出来的背景地图与热点图同步?

原谅我把这里当作了问问题的地方,但暂时我们好像还没有一个类似地方吧。

是这样的情况,我使用了china 的geojson 在一个view上绘制了地图。然后我在另外一个view上使用数据绘制热点图后,热点图的位置,与地图并不重合。
现在我暂时还没有想到办法把两者的地图坐标系重合。

能不能封装到React里?

这个render的方式是基于DOM的。有没有计划做一个React的封装?

当然没有封装这样也可以在React里用,但总是麻烦一点。并且你们ant.design也是有完整React组建的,不知道是不是考虑呢?

在使用了combinColumns后如何修改图例文字

frame = Frame.combinColumns(frame, ['highPress', 'lowPress', 'pulseRate'], 'value', 'vv', 'date');

highPress这些需要显示中文(⊙﹏⊙)b
在source方法 defs 里面设置type:cat value:xx 不行
使用chart.legend 没看到有这个设置

How to destroy a range plugin ?

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?

plotmove事件问题

现在ev对象里面的数据,不知道怎么判断当前的鼠标是否悬停在某个shape上。

tooltip title formatter

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.

screen shot 2016-11-21 at 2 22 34 pm

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.

combinColumns合并列后,通过values设置别名导致color失效

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方法里打印出来的全是白屏时长,是哪里设置不对么?

保存为图片的功能?

像 Demo 中提供的功能,在右上角显示一个保存为图片的按钮。
目前是否提供这个功能?还是需要自己实现?

English documentation

Hi G2 Team,

Your framework look awesome, great job! 👍

Would it be possible to have a english documentation ?

Uncaught max not equal to min

原已关闭问题,未解决#8

这个错误只会在<单点 && type= time >时出现,其他的type并没有,
chart.source(data, {
time: {
type: 'time',
mask: 'mm-dd',
alias: '日期'
},

对于单个值的处理time类型的适配坐标轴范围时,对于max和min值是同一个值, 处理有错误,

react import g2 document is not defined

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

line chart 的 event 交互無法明確取得 data element

line 的 Geom 在 event的交互我遇到了以下問題:

  1. plotclick事件是整個canvs的事件,如果data set有多個group/line,沒有明確點到data point會取不到data。

建議:因為多group的情境實際上每個event觸發點會有多個資料點(y),那是否能只回傳x軸的值?

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.