Antv G2plot学习笔记（一）

最新推荐文章于 2024-08-21 09:55:37 发布
最新推荐文章于 2024-08-21 09:55:37 发布
阅读量7.2k 收藏 3
点赞数 2
文章标签： 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43378385/article/details/105270406
版权

Antv G2plot学习笔记（一）

官方网址：https://g2plot.antv.vision/zh

在执行官方的实例中，发现无法将数据进行图表展示，经过好友的分享和实践发现是出在变量引用不到的问题，之前的const linePlot = new Line(） 无法获取到，修改为G2Plot.Line(） 即可，下面是我写的实例，仅供参照。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.js"></script>
	</head>
	
	
	<body>

			<div id="canvas"></div>

		
	</body>
	<script type="text/javascript">
	
	    const data = [
	      { year: '1991', value: 3 },
	      { year: '1992', value: 4 },
	      { year: '1993', value: 3.5 },
	      { year: '1994', value: 5 },
	      { year: '1995', value: 4.9 },
	      { year: '1996', value: 6 },
	      { year: '1997', value: 7 },
	      { year: '1998', value: 9 },
	      { year: '1999', value: 13 },
	    ];
		
		const linePlot = new G2Plot.Line('canvas', {
		  data,
		  xField: 'year',
		  yField: 'value',
		});
		
		linePlot.render();
	</script>
</html>

好友的文章
链接: https://blog.csdn.net/qq_43726671/article/details/105270412.

小小的爬虫
关注
vue3使用g2plot图表
weixin_45767637的博客
07-24 723
【代码】vue3使用g2plot图表。
AntV | 蚂蚁数据可视化 G2Plot 快速入门
热门推荐
weixin_46703850的博客
11-12 1万+
AntV | 蚂蚁数据可视化 G2Plot 快速入门 G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成。
G2Plot Line 线性 x 轴头尾两头不留空白（或指定留白范围）
卡尔特斯
01-11 1203
G2Plot 的功能是可以的，但是文档是稀烂，压根就没写清楚什么属性支持什么地方，对应的属性也不写清楚可使用什么子属性，稀烂！ 留白配置主要是 range 属性，这个属性支持很多地方，但是没写清楚哪些地方可以用 // x轴配置 xAxis: { // 轴头尾留空白，0 - 1 取值，0 是最左边，1 是最右边 range: [0, 1] } 下面是案例代码 <template> <!-- 图表 --> <div id="Line1"></
G2Plot 开源项目使用指南
最新发布
gitblog_01165的博客
08-21 386
G2Plot 开源项目使用指南 G2Plot:dango: An interactive and responsive charting library.项目地址:https://gitcode.com/gh_mirrors/g2/G2Plot G2Plot 是由 AntV 团队维护的一个强大的数据可视化图表库，它提供了一系列丰富的交互式图表组件，旨在简化数据可视化应用的开发过程。本指南将带您...
React+G2 + G2plot 踩坑
ujjhuhu的博客
02-18 4274
这里写自定义目录标题参与图表组件库开发（要求使用Echarts或G2）坑1： 参与图表组件库开发（要求使用Echarts或G2） 因为这两个都没用过，翻阅多篇文章，最终选择入坑G2，要用就用新技术！所以特此记录，方便以后避坑。 示例图（颜色随数据改变）： 坑1： ............
[vue]vue接入AntV G2Plot
晴朗的心情博客
04-01 777
文章目录安装配置使用 安装 npm install @antv/g2plot --save 配置 在main.js中 引入 import g2 from '@antv/g2plot' Vue.prototype.$G2 = g2 使用 图表地址：https://g2plot.antv.vision/zh/examples/line/multiple#style-callback <template> <div id="container"></div> </
AntV | G2Plot
lilygg的博客
11-06 6404
g2plot简介 g2plot是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成，"g2plot"中的 g2 即意指图形语法 (the Gramma of Graphics)，同时也致敬了 ggplot2。 官方文档：https://antv-g2plot.gitee.io/zh/docs/manual/introduction 参考链接：https://blog.csdn.net/weixin_42628594/article/details/108658435 .
快速上手AntV G2Plot
01-08
快速上手AntV G2Plot 小白一枚，引入官方示例各种报错，发现Line对象在G2Plot对象里面！ 将const linePlot = new Line()…改为const linePlot = new G2Plot.Line后正常， 标题复制下面代码可直接出效果 /...
g2plot-react：用于React的G2Plot
02-05
@ opd / g2plot-react 用于React的 安装 npm install @opd/g2plot-react 用法 import React , { useRef } from 'react' import { LineChart , LineChartProps } from '@opd/g2plot-react' const config : ...
在vue项目中引用Antv G2,以饼图为例讲解
01-18
npm install @antv/g2 –save template内容： <div id=pieChart></div> js部分： ​//引入G2组件 import G2 from @antv/g2; ​ export default { name:, //数据部分 data(){ return{ sourceData: [],//...
G2Plot水波图在vue项目中的实现
m0_60257268的博客
11-16 2785
由于工作需要要实现水波图，大概的效果就是如下 里面的水波是动态的，在网上找了很久才找到G2Plot有这样的图例 第一次使用G2Plot,有很多不知道地方，还有vue的知识不够充实，所以写下了这篇本人对G2Plot水波图在vue项目中的实现，其中还是有好多不足的地方，望谅解 首先给G2Plot的官方链接，里面有很多的教程，我这不再过多的解释 G2Plot 开箱即用的图表库 | AntV ...
antv g2plot可视化图表在vue中的使用之四：为图表添加事件
砥砺前行的博客
10-16 3671
文章目录图表事件g2plot升级 图表事件 对图表进行个性化设置，包含 基本的折线图的配置可参考g2plot官网教程 (https://g2plot.antv.vision/zh/docs/manual/getting-started)不再赘述。 下面以柱状图为例，也可在https://g2plot.antv.vision/zh/examples/column/basic在线修改查看实时效果。 g2plot升级 ...
【PyG2Plot】来试一下蚂蚁开源的图表库PyG2Plot效果如何~~
AwesomeTang
07-04 1405
前言 ???? PyG2Plot 是 @AntV/G2Plot 在 Python3 上的封装。 G2Plot 是一套简单、易用、并具备一定扩展能力和组合能力的统计图表库，基于图形语法理论搭建而成。 G2Plot是蚂蚁开源的一款可视化图标库，官方地址：https://antv-g2plot.gitee.io/zh ，因为PyG2Plot没做什么二次开发，所以文档直接看G2Plot的文档就行； ...
使用G2Plot制作图表
weixin_55269913的博客
11-24 511
学会使用G2Plot制作图表
g2plot 水滴图，包含数据更新时渲染问题
zhaoz的博客
06-01 1405
官网地址：https://g2plot.antv.vision/zh/docs/manual/introduction 第一步: vue安装对应插件（网上很多，可以百度一下） npm install @antv/g2plot --save 第二步：引入 import{Liquid}from'@antv/g2plot' 创建对应的div <divid="linechart"/> data定义一个 linePlot 加载 mounted(){...
蚂蚁金服的AntvG2的日常使用和报错情况（简称坑）
07-28 5875
先说报错： 1、antv 报错Chart.data is not a function 解决：这个是因为版本的问题，在不指定版本的情况下，由于npm安装的antv的版本为3.x.x, 我们可以使用v3中的source代替data方法 同时我们也可以使用v4版本：npm install @antv/g2@4.0.7 2、 vue中使用 import { Chart } from '@antv/g2'; const data = [ { feature: 'Battery', value: 0.22, ph
显示无数据源的Chart对数表
weixin_44826605的博客
04-23 454
Imports System.Math Imports System.Windows.Forms.DataVisualization.Charting Public Class Form1 Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click Dim fs As...
G2Plot自定义tooltip的title
MYG_G
12-21 2569
需求： 期望移入显示的tooltip可以自定义title和g2-tooltip-list-item 官网链接：https://g2plot.antv.vision/zh/examples/bar/basic#width-ratio 效果如下 默认显示如下： tooltip默认展示的title是我们Y轴对应数据， 默认展示的g2-tooltip-list-item是x轴数据类型名称:x轴对应的数据 用到tooltip相关属性 代码如下 import React, { useEffect } fro.
antv g2plot 怎么自定义缩略轴
05-31
在 antv G2Plot 中，可以通过 `slider` 配置项来自定义缩略轴。具体步骤如下： 1. 在 G2Plot 中启用缩略轴，使用 `slider: true` 配置项。 2. 使用 `slider: {}` 配置项来自定义缩略轴，其中包括以下常用配置： - `start`: 缩略轴的起始位置，一般为 0。 - `end`: 缩略轴的结束位置，一般为 1。 - `height`: 缩略轴的高度。 - `xAxis`: 缩略轴的 X 轴配置项，包括 `type`、`grid` 等。 - `yAxis`: 缩略轴的 Y 轴配置项，包括 `type`、`grid` 等。 - `backgroundStyle`: 缩略轴的背景样式，包括 `fill`、`fillOpacity` 等。 - `data`: 缩略轴的数据，一般为原始数据的子集。 例如，下面是一个简单的自定义缩略轴的示例代码： ```javascript import { Line } from '@antv/g2plot'; const data = [ { year: '1991', value: 3 }, { year: '1992', value: 4 }, { year: '1993', value: 3.5 }, { year: '1994', value: 5 }, { year: '1995', value: 4.9 }, { year: '1996', value: 6 }, { year: '1997', value: 7 }, { year: '1998', value: 9 }, { year: '1999', value: 13 }, ]; const linePlot = new Line('container', { data, xField: 'year', yField: 'value', slider: { start: 0, end: 0.5, height: 26, xAxis: { type: 'time', grid: null, }, yAxis: { grid: null, }, backgroundStyle: { fill: '#f5f5f5', fillOpacity: 0.9, }, data: data.slice(0, 4), }, }); linePlot.render(); ``` 在上述代码中，我们使用 `slider` 配置项来自定义缩略轴，其中： - `start` 和 `end` 分别为缩略轴的起始位置和结束位置，这里设置为 0 和 0.5。 - `height` 为缩略轴的高度，这里设置为 26。 - `xAxis` 和 `yAxis` 分别为缩略轴的 X 轴和 Y 轴配置项，这里设置为时间轴和无网格线。 - `backgroundStyle` 为缩略轴的背景样式，这里设置为浅灰色。 - `data` 为缩略轴的数据，这里设置为原始数据的前四个点。 你可以根据实际需求修改以上配置项来自定义缩略轴。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值