Code Monkey home page Code Monkey logo

g2plot's Introduction

English | 简体中文

G2Plot

基于 G2 4.x 版本二次封装的图表库。

Version NPM downloads Latest commit build Status coverage Percentage of issues still open Average time to resolve an issue

📢 新版本 G2 v5 已经发布,未来不会基于 G2 v5 封装 G2Plot v3 版本,但是可以使用 Ant Design Charts 代替。

网站快速开始博客AntV ThemeSet

一套简单、易用、并具备一定扩展能力和组合能力的统计图表库,基于图形语法理论搭建而成,『G2Plot』中的 G2 即意指图形语法 (the Grammar of Graphics),同时也致敬了 ggplot2。我们想做的事有三件:

  1. 使用户不用成为可视化专家也能够轻松制作出优雅美观的图表。
  2. 保证图表能够经受得起业务的检验,在真实的场景中易用、好用。
  3. 探索统计图表的更多可能性,使统计图表变得更好玩、更酷。

✨ 特性

📦 开箱即用、体验优雅的高质量统计图表

G2Plot 呈现给用户的是一套提炼自企业级产品的视觉语言和设计规范。不仅对图表的整体视觉样式进行了优化,并且针对每一个图表自身的特点,沉淀出一套最佳配置,保证用户能够通过最少的配置制作出优雅、标准的图表。

📊 响应式:让图表更聪明

在现实的图表应用场景中,一个棘手的难题是图表的展示空间往往并不足够显示图表的数据量,造成极值情况下文本的重叠遮挡、内容无法自适应、内容裁剪等问题。G2Plot 借鉴宽容性设计的**,在图表的信息密度过高时,对图表辅助信息进行抽稀,保证图表主要信息的展示和基本可读性。

🔳 向前一步:会讲故事的图表

在 G2Plot 体系下,图表不仅仅只是各不相关的实例,图层概念的引入提供了多图表组合、叠加、联动,共同讲述一个数据故事的可能性。未来,我们还将探索统计图表转化信息图的可能性,丰富统计图表的表现能力。

📦 安装

$ npm install @antv/g2plot

🔨 使用

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

const data = [
  { year: '1951 年', sales: 38 },
  { year: '1952 年', sales: 52 },
  { year: '1956 年', sales: 61 },
  { year: '1957 年', sales: 145 },
  { year: '1958 年', sales: 48 },
];

const bar = new Bar('container', {
  data,
  xField: 'sales',
  yField: 'year',
  seriesField: 'year',
});

bar.render();

🤝 参与贡献

我们非常欢迎你的贡献!无论是 issue 还是 PR。

反馈问题请先阅读 issues

提交代码请遵循 贡献指引

感谢下面这些贡献者 (emoji key):


Visiky

💻

hustcc

💻

Joel Alan

💻

刘珍莹

💻

zqlu

💻

arcsin1

💻

被雨水过滤的空气

💻

banli

💻

xi li

💻

DarrenPei

💻

MiniPear

💻

connono

💻

于向前

💻

afc163

💻

Martin Jul

💻

jhwong

💻

Jingsong Gao

💻

Mr小刘

💻

ntscshen

💻

yiminanci

💻

ai-qing-hai

💻

xrkffgg

💻

Dawnlck

💻

Karis

💻

Mayne

💻

Plortinus

💻

Shanjie Chen

💻

Yang Libin

💻

beewolf233

💻

lqzhgood

💻

neoddish

💻

stack-stark

💻

vector

💻

嘤嘤嘤

💻

琚致远

💻

14

💻

🔗 相关链接

ChartCube - 基于 G2Plot 的在线图表制作工具,交互简单,一键导出图表代码!

许可证

MIT

g2plot's People

Contributors

aarebecca avatar afc163 avatar ai-qing-hai avatar angelii avatar arcsin1 avatar bbsqq avatar connono avatar cooper1x avatar csjkevin avatar darrenpei avatar dengfuping avatar eltociear avatar guonanci avatar hustcc avatar kagawagao avatar kajweb avatar lessmost avatar liuzhenying avatar lqzhgood avatar lxfu1 avatar mjul avatar ntscshen avatar pearmini avatar sersishen avatar visiky avatar xrkffgg avatar yp0413150120 avatar yujs avatar yulamz avatar zhangzhonghe 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

g2plot's Issues

文件名的命名规则

是否保证一个命名规则,规则大概为:

  • 全小写
  • 如果多个单词的,用 - 分割

例如:

  • plot
  • base-interaction

如果可以的话, 看到一个改一个,逐步改掉吧~

TS类型定义问题 & 图表默认配置

图表默认配置优化

https://yuque.antfin-inc.com/antv/g2-4/kclgfa

每一个图表的TS类型定义

使用TS改写默认的line-basic DEMO,会有TS类型错误

const cfg: LineConfig = {
  padding: 'auto',
  data: [{ x: 'a', y: 1 }, { x: 'b', y: 2 }],
  xField: 'x',
  yField: 'y',
};

const plot = new Line(document.getElementById('canvas'), cfg);

问题:

  1. cfg定义报错
    image

  2. cfg类型LineConfig与Line的构造函数参数要求的ViewLayer不一致
    image

柱状图,条形图,color属性

柱状图,条形图,原color属性是用别的替代了,还是bug了。

color为一个颜色数组的时候全部显示第一个色值。

禁用组件的配置项很怪

如果要禁用 tooltip,那么 g2plot 是

tooltip: {
  visible: false
}

看看其他图表库:

  • echarts: tooltip: false
  • highcharts: tooltip: false
  • ...

为什么要在这种大家都觉得约定俗成的配置项上做创新?本身这个配置项就够长了,我写个禁用还要占个三行这是什么毛病

Standardize the names of chart types

Although the names of chart types have many variations in Chinese, they do have uniform terminology in English. As a library based on chart taxonomy, the naming of chart types needs to be consistent with international conventions, otherwise it will be confusing to users.

For example:

  • ring -> donut (or doughnut, but donut is neater)
  • stack XXX -> stacked XXX
  • group XXX -> grouped XXX

More resources to refer to:

饼图设置innerRadius无效

试运行 torch --compile --interactive ./__tests__/unit/pie.spec2.js
执行结果如下图,内半径设置无效
image

label 配置项不支持textStyle的配置(暂不提供支持)

目前,配置label.textStyle是不生效的,看了 g2的labelController 层,并没有使用用户配置labelOptions.textStyle, 是不打算 开放 label.textStyle的配置吗?只能在 theme 中配置全局
label.textStyle? 这么做的原因是什么? @paleface001

复现测试单例如下:

    const pie = new Pie(canvasDiv, {
      width: 600,
      height: 600,
      data: largeData,
      label: {  
        visible: true,
        type: 'custom-pie',
        formatter: (text, item, index) => {
          const origin = item._origin;
          return `${origin['type']}\n\n${origin['value']}`;
        },
        //  🔥 此处的配置是无效的 🔥
        textStyle: {
          lineHeight: 16,
          fill: 'red',
        }
      },
      angleField: 'value',
      colorField: 'type',
      padding: [0, 0, 0, 0],
      animation: false,
      radius: 0.75,
      innerRadius: 0.25,
      title: {
        text: '饼图 - custom pie label',
      },
      description: {
        text: '1. 量级大,100条数据;',
      },
      legend: {
        visible: false,
      },
    });

image

饼图,环形图,label问题

  1. label type= spider的formatter 参数需要与ounter inner的保持一致

  2. label formatter 需要饼图计算后的百分比数据

饼图 设置label.type 为spider后,配置 label:mousemove等label相关事件无效

复现 测试用例,当labelType不为spider的时候,就生效了(主要原因还是spiderLabel的实现不是通过register的方式 导致的)

const canvasDiv = createCanvasDiv('canvasDiv1')
    const pie = new Pie(canvasDiv, {
      width: 600,
      height: 600,
      data: smallData,
      label: {  
        visible: true,
        type: 'spider',
        style: {
          // todo 自定义连线颜色
        }
      },
      angleField: 'y',
      colorField: 'x',
      padding: [0, 0, 0, 0],
      animation: false,
      radius: 1,
      title: {
        text: '饼图 - spider label',
      },
      description: {
        text: '1.label默认展示为“colorField value(上)angleField value(下,默认换行显示)”; \n2.[todo]label连线颜色设为灰色; \n3.[todo]label添加hover交互; \n',
      },
      legend: {
        visible: false,
      },
      events: {
        'label:mousemove': (...args) => {
          console.info('todo: spiderLabel 设置该事件的时候 会不生效');
        },
      }
    });

    pie.render();

g2plot API 设计讨论

把之前的搬过来......

  • plot container只支持dom

plot-container

  • 先声明一个 absoluteChart, 然后 new 两个,灌入不同数据然后渲染

renderToDom

具体实现的讨论:
2333333

WIP: 文档中的一些建议

内容上

  1. 事件名建议全部采用小写,同 DOM 事件命名风格保持一致(这属于 API 方面的建议)
  2. 对于属性支持回调函数的使用描述过于简单,应该给出具体的 API,包括入参以及返回结果等,最好也有 demo。另外类似描述对象类型中包含的各个属性,使用表格或者代码的方式会不会比现在的列表方式更好?
    image
  3. 在每一篇图表的使用文档中,是否应该都配备适当的 demo?

格式上

  1. 中文文案排版指南,详见 PR,中英文之间加个空格呀~~~注意中英文标点符号
  2. 代码片段需要注明使用的编程语言,便于代码高亮显示
  3. 文档中的代码也需要注意 code style,看有的数据实例直接就这样写了..
    image

未完待续...

visible: false 无效

图表属性的title 以及description 还有坐标轴xAxis 和yAxis 的 title 都有这个问题

layer重构

目前的图层存在以下问题:

  • 一些应该属于layer的方法放在了plot中,如状态量更新的相关方法
  • layer => plot的方法需要进行抽象
  • 单layer plot(即除混合图表模式的所有图表)的方法没有透传到plot

饼图label formatter异常

当饼图label设置如下时,显示结果如图1
其他:type为spider时显示正常,或者不设置style的时候,显示也正常

label: {
     type: 'inner', // 或 outter
     visible: true,
     formatter: () => 'inner label',
     style: {
        text: {
          fill: '#666',
          fontSize: 12,
          // lineHeight: 16,
        },
    },
},

image

plot配置description的文案莫名换行了

image

复现配置项

it('创建饼图, 量级小, spider label', () => {
    const canvasDiv = createCanvasDiv('canvasDiv1')
    const pie = new Pie(canvasDiv, {
      width: 600,
      height: 600,
      data: smallData,
      label: {  
        visible: true,
        type: 'spider',
        style: {
          // todo 自定义连线颜色
        }
      },
      angleField: 'y',
      colorField: 'x',
      padding: [0, 0, 0, 0],
      animation: false,
      radius: 1,
      title: {
        text: '饼图 - spider label',
      },
      description: {
        text: '1.label默认展示为“colorField value(上)angleField value(下,默认换行显示)”; \n2.[todo]label连线颜色设为灰色; \n3.[todo]label添加hover交互; \n',
      },
      legend: {
        visible: false,
      },
      events: {
        'label:mousemove': (...args) => {
          console.info('fixme: spiderLabel 设置该事件的时候 会不生效');
        },
      }
    });

    pie.render();
  });

image

默认值相关需求

  1. 饼图中间需要分割线

  2. responsive 默认值需要设置为true

  3. 环形图默认值太瘦了,需要调优

labelRenderer.get('items') 获取的label数量和原始data数量不一致

 /** 获取数据标签的renderer实例 */
  protected _getDataLabel(): Label | null {
    const labelController = this._getElement().get('labelController');
    return labelController.labelsContainer ? labelController.labelsContainer.get('labelsRenderer') : null;
  }

// 获取标签点
  private _getLabelItems(): TextType[] {
    const labelsRenderer = this._getDataLabel();
    const labelItems = labelsRenderer.get('items');
    return labelItems;
  }

结果
labelItems.length !== data.length
image

折线图配置 point 样式后,交互的时候,图形样式会覆盖用户配置样式。

折线图配置 point 样式后,交互的时候,图形样式会覆盖用户配置样式。
需要改 plot 底层。

如下配置项。
hover 时,
期待的效果:点的填充色时粉色,边框色黑色,高亮,移出后恢复。
实际效果:点的填充色变成了主题中的默认色,边框色为红色,移出后有时还不能恢复。

point: {
        visible: true,
        color: 'red',
        size: 5,
        style: {
          fillStyle: 'pink',
          lineWidth: 2,
          strokeStyle: 'black',
        },
      },

原始图表:
image
hover时,鼠标移动到点上:
image
鼠标移出后
image

蜘蛛图bug

image

label 布局失效

spider 的label,返回的值和inner outer的不一致
image

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.