爱看下载站为大家提供最全面的软件下载!

最近更新 热门排行

热门搜索:腾讯QQ有道词典Photoshop CS6盛名时刻表爱剪辑

当前位置:首页 ›› 编程软件 ›› 源码相关

G2(可视化引擎) v5.0.11官方版G2可视化引擎[下载地址]

G2(可视化引擎) v5.0.11官方版
  • 授权方式:免费软件
  • 软件类型:国产软件
  • 软件语言:简体中文
  • 软件大小:26.3 MB
  • 推荐星级:
  • 软件厂商:Home Page
  • 更新时间:2023-05-30 19:51
  • 网友评论:0  条
  • 运行环境:Win7, Win8, Win10, Win11
好评:266
坏评:33
  • 本地下载文件大小:26.3 MB

  • 软件介绍
  • 软件截图
  • 相关文章
  • 下载地址

G2是一款可视化的统计图表软件,提供绘图引擎、完备图形语法和专业的设计规范,采用高交互可视化的图形语法,一条语句就可以使用canvas或者SVG构建出各种可交互的统计图表了,具有很强的易用性和扩展性。

基本简介

G2是一套面向常规统计图表,以数据驱动的高交互可视化图形语法,具有高度的易用性和扩展性。使用G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。

软件特色

💯 完善的图形语法:数据到图形的映射,能够绘制出所有的图表。

🤩 全新的交互语法:通过触发和反馈机制可以组合出各种交互行为,对数据进行探索。

🦍 强大的 View 模块:可支持开发个性化的数据多维分析图形。

👬 双引擎渲染:Canvas 或 SVG 任意切换。

💄 可视化组件体系:面向交互、体验优雅。

🛡 全面拥抱 TypeScript:提供完整的类型定义文件。

G2安装使用方法

安装

通过 npm 安装

npm install @antv/g2 --save

成功安装完成之后,即可使用 import 或 require 进行引用。

import { Chart } from '@antv/g2';

const chart = new Chart({

container: 'c1',

width: 600,

height: 300,

});

浏览器引入

既可以通过将脚本下载到本地也可以直接引入在线资源:

开始使用

在 G2 引入页面后,我们就已经做好了创建第一个图表的准备了。

下面是以一个基础的柱状图为例开始我们的第一个图表创建。

1. 创建 div 图表容器

在绘图前我们需要为 G2 准备一个 DOM 容器:

2. 编写图表绘制代码

创建 div 容器后,我们就可以进行简单的图表绘制:

new Chart() 创建 Chart 图表对象,指定图表所在的容器 id、图表的宽高、边距等信息;

chart.data() 载入图表数据源;

使用图形语法进行图表的绘制;

chart.render() 渲染图表。

常见问题

1、如何导出图片

考虑到 G2 使用环境的不同(浏览器、mobile 等),G2 从 v4 版本开始,不再提供 chart.toDataURL() 以及 chart.downloadImage() 接口,鼓励用户自己包装。

可以参考以下工具函数(能覆盖大部分场景,但是不保证完全不存在兼容问题,仅供参考)

2、Tooltip 内出现了重复值

在绘制面积图时经常会遇到如下图的问题,本来是相同的数据却在 tooltip 上出现了两个值。

图表代码:

import { Chart } from '@antv/g2';

const data = [

{ year: '1991', value: 15468 },

{ year: '1992', value: 16100 },

{ year: '1993', value: 15900 },

{ year: '1994', value: 17409 },

{ year: '1995', value: 17000 },

{ year: '1996', value: 31056 },

{ year: '1997', value: 31982 },

{ year: '1998', value: 32040 },

{ year: '1999', value: 33233 },

];

const chart = new Chart({

container: 'container',

autoFit: true,

height: 500,

});

chart.data(data);

chart.scale({

value: {

min: 10000,

nice: true,

},

year: {

range: [0, 1],

},

});

chart.tooltip({

showCrosshairs: true,

shared: true,

});

chart.axis('value', {

label: {

formatter: (val) => {

return (+val / 10000).toFixed(1) + 'k';

},

},

});

chart.area().position('year*value').color('l(90) 0:#1890FF 1:#f7f7f7');chart.line().position('year*value');

chart.render();

原因解释:因为在代码中给 chart.area() 和 chart.line() 配置了不同的颜色,tooltip 去重规则会考虑颜色,颜色不同的视为不同的数据。

解决方案:

可以将其中一个 tooltip 关闭,比如 chart.area().tooltip(false)。

监听 chart.on('tooltip:change') 事件,动态修改 items 数据。

3、Legend 设置 marker.symbol 出错或不展示

G2 4.0 支持的 legend marker 标记类型(symbol)有:"circle" | "square" | "line" | "diamond" | "triangle" | "triangle-down" | "hexagon" | "bowtie" | "cross" | "tick" | "plus" | "hyphen",具体可以见 API

🗑️ triangleDown 标记类型移除,变更为 triangle-down

🗑️ hollow-* 等标记类型移除,可以通过设置 style 来达到空心的效果

更新日志

Refactor

refactor(geometry): 优化 label 和 element 的绑定逻辑 by @visiky in #3884

refactor(labels): 延迟 Geometry label 渲染,提升首屏渲染速度 by @visiky in #3886

feat: use worker to do label layout ?? by @visiky in #3888

注意:labels 延迟渲染,获取 labels 方式需要变更 (详见: #3891 )

推荐软件

下载地址
G2(可视化引擎) v5.0.11官方版
湖北电信下载
江西电信下载
北京联通下载
广东移动下载

软件评论

请自觉遵守互联网相关政策法规,评论内容只代表网友观点,与本站立场无关!

  验证码:  
推荐下载