精华内容
下载资源
问答
  • npm install @antv/g2 –save template内容: <div id=pieChart></div> js部分: ​//引入G2组件 import G2 from @antv/g2; ​ export default { name:, //数据部分 data(){ return{ sourceData: [],//...
  • 快速上手AntV G2Plot

    2021-01-08 12:38:49
    快速上手AntV G2Plot 小白一枚,引入官方示例各种报错,发现Line对象在G2Plot对象里面! 将const linePlot = new Line()…改为const linePlot = new G2Plot.Line后正常, 标题复制下面代码可直接出效果 /...
  • AntV G2

    2021-10-15 15:31:25
    最近接触到一款画图形的前端框架 G2(The Grammar Of Graphics) 是一个由纯 javascript 编写、强大的语义化图表生成工具,它提供了一整套图形语法,可以让...官网:https://g2.antv.vision/zh ECharts, 缩写来自Enter

    最近接触到一款画图形的前端框架

    G2(The Grammar Of Graphics) 是一个由纯 javascript 编写、强大的语义化图表生成工具,它提供了一整套图形语法,可以让用户通过简单的语法搭建出无数种图表,并且集成了大量的统计工具,支持多种坐标系绘制,可以让用户自由得定制图表,是为大数据时代而准备的强大的可视化工具。
    G2可以支持Canvas和SVG绘图,还未提供导出图片的接口,需要自行实现导出图片
    官网:https://g2.antv.vision/zh

    ECharts,
    缩写来自Enterprise Charts,是百度推出的一款开源的,商业级数据图表,它最初是为了满足百度公司商业体系里各种业务系统(如凤巢、广告管家等等)的报表需求。
    ECharts3.8版本以上(包括3.8)可以支持SVG和Canvas绘图,3.8版本以下只能支持Canvas,且两种方式都只能导出jpg,png格式的图片,目前还无法导出svg格式图片,上手最简单,定制化程度较低。
    官网:https://echarts.apache.org/zh/index.html

    和之前用到的Echarts相比,G2是专注于画图形的,Echarts是画图表的。

    展开全文
  • AntV G2/G2Plot柱状折线混合图

    千次阅读 2020-10-22 18:10:20
    AntV G2实现柱状折线混合图比较简单,只需要设置position里面的值就可以了。 案例里面有个双轴图表:https://antv-g2.gitee.io/zh/examples/other/other#double-axes 按照上面的模式自己设置一个双轴混合图。分了三...

    G2混合图

    AntV G2实现柱状折线混合图比较简单,只需要设置position里面的值就可以了。
    案例里面有个双轴图表:https://antv-g2.gitee.io/zh/examples/other/other#double-axes

    在这里插入图片描述
    按照上面的模式自己设置一个双轴混合图。分了三组数据,A,B,C。A是柱子,B和C是line加area的形式。

    在这里插入图片描述

    let data = [
        { genre: 'Sports', sold: 275, type: "A" },
        { genre: 'Strategy', sold: 215, type: "A" },
        { genre: 'Action', sold: 180, type: "A" },
        { genre: 'Shooter', sold: 150, type: "A" },
        { genre: 'Other', sold: 100, type: "A" },
    
        { genre: 'Sports', sold: 175, type: "B" },
        { genre: 'Strategy', sold: 175, type: "B" },
        { genre: 'Action', sold: 246, type: "B" },
        { genre: 'Shooter', sold: 150, type: "B" },
        { genre: 'Other', sold: 250, type: "B" },
    
        { genre: 'Sports', value: 10, type: "C" },
        { genre: 'Strategy', value: 20, type: "C" },
        { genre: 'Action', value: 30, type: "C" },
        { genre: 'Shooter', value: 40, type: "C" },
        { genre: 'Other', value: 50, type: "C" },
    ]
    const chart = new G2.Chart({
        container: 'c2',
        width: 600,
        height: 300,
    });
    chart.data(data);
    chart.scale('sold', {
        nice: true,
        min:0
      });
    chart.interval().position('genre*value');
    chart.line().position('genre*sold').color('type')//.adjust('stack')
    chart.area().position('genre*sold').color('type')//.adjust('stack')
    

    看起来有点乱。

    如果我再加一个轴呢?右边的两个Y轴重叠一起了,看起来更乱,其实就算是双轴的时候,也不易区分那个表对应的是左边还是右边的轴。所以啊,双轴慎用,混合也少用。

    在这里插入图片描述

    G2Plot混合图

    用G2Plot来生成混合图表,再等等吧,各种文档api还在开发中,bug还有一堆没修复。G2Plot的数据绑定后,完全没有像g2中position一样的配置,所以数据驱动,驱动成这样子了?
    在这里插入图片描述

    不过在G2Plot的Rect版本中已经有混合图了,他们优先开发了rect版本,因为阿里就是死磕Rect,其他的版本慢慢等吧。看了一眼他们的计划,开发中、bug以及设计修改中……

    geometryOptions
    可选, array object
    功能描述:
    指定了双轴各自对应的图形,第一项为左轴配置,第二项为右轴配置。每一个配置应为 Line 或 Column 类型的 Config 单轴支持图形范围包括折线图,多折线图,柱状图,分组柱状图,堆叠柱状图。

    在这里插入图片描述
    G2Plot 2.0.5 版本的案例中加了双轴图:
    theme: ‘dark’ 还没修复。
    在这里插入图片描述

    展开全文
  • import { Chart } from '@antv/g2'; const data = [ { month: 'Jan', city: 'Tokyo', temperature: 7 }, { month: 'Jan', city: 'London', temperature: 3.9 }, { month: 'Feb', city: 'Tokyo', temperature: ...

    AntV G2自定义tooltip

    业务场景

    使用AntV G2做开发的时候,可能会遇到要自定义tooltip的情况。
    默认效果
    经过查阅文档和调试代码后,最终能实现下面的效果:tooltip可以为单项数据加单位,纵坐标统一显示单位。
    在这里插入图片描述

    实现思路

    // author by Emily酱 from CSDN
    chart.tooltip({
      showCrosshairs: true,
      shared: true,
      itemTpl: `
        <div style="margin-bottom: 10px;list-style:none;">
        <span style="background-color:{color};" class="g2-tooltip-marker"></span>
        {name}: {value}
        </div>
        ` // 这里的{name}和{value}就是下面.tooltip中return的name和value
    });
    chart.line()
      .position('month*temperature') // 数据源(一个数组)中每个元素(一个对象)的month属性和temperature属性交会画出来的折线
      .color('city') // 有多少条折线由city属性来定
      .shape('smooth')
      .tooltip('month*temperature*city', function (month,temperature,city) { // tooltip的第一个参数写上需要显示的字段'item1*item2*...';第二个参数为一个函数,该函数的参数为需要显示的字段。
        return {
          name: city,
          value: temperature + '°C' // 这里也可以通过调用其他自定义函数的方式,去对数据进行更深层次的变换。但要注意this的指向问题!
        }
      })
    
    

    Demo

    下面的demo是基于G2的官网的图表示例-折线图-基础折线图-气温图进行改造的。添加了// add注释的为新增的代码行,添加了// edit注释的为修改的代码行供大家参考。

    import { Chart } from '@antv/g2';
    
    const data = [
      { month: 'Jan', city: 'Tokyo', temperature: 7 },
      { month: 'Jan', city: 'London', temperature: 3.9 },
      { month: 'Feb', city: 'Tokyo', temperature: 6.9 },
      { month: 'Feb', city: 'London', temperature: 4.2 },
      { month: 'Mar', city: 'Tokyo', temperature: 9.5 },
      { month: 'Mar', city: 'London', temperature: 5.7 },
      { month: 'Apr', city: 'Tokyo', temperature: 14.5 },
      { month: 'Apr', city: 'London', temperature: 8.5 },
      { month: 'May', city: 'Tokyo', temperature: 18.4 },
      { month: 'May', city: 'London', temperature: 11.9 },
      { month: 'Jun', city: 'Tokyo', temperature: 21.5 },
      { month: 'Jun', city: 'London', temperature: 15.2 },
      { month: 'Jul', city: 'Tokyo', temperature: 25.2 },
      { month: 'Jul', city: 'London', temperature: 17 },
      { month: 'Aug', city: 'Tokyo', temperature: 26.5 },
      { month: 'Aug', city: 'London', temperature: 16.6 },
      { month: 'Sep', city: 'Tokyo', temperature: 23.3 },
      { month: 'Sep', city: 'London', temperature: 14.2 },
      { month: 'Oct', city: 'Tokyo', temperature: 18.3 },
      { month: 'Oct', city: 'London', temperature: 10.3 },
      { month: 'Nov', city: 'Tokyo', temperature: 13.9 },
      { month: 'Nov', city: 'London', temperature: 6.6 },
      { month: 'Dec', city: 'Tokyo', temperature: 9.6 },
      { month: 'Dec', city: 'London', temperature: 4.8 },
    ];
    
    const chart = new Chart({
      container: 'container',
      autoFit: true,
      height: 500,
    });
    
    chart.data(data);
    chart.scale({
      month: {
        range: [0, 1],
      },
      temperature: {
        nice: true,
        alias: '气温(°C)', // add
      },
    });
    
    chart.tooltip({
      showCrosshairs: true,
      shared: true,
      itemTpl: `
        <div style="margin-bottom: 10px;list-style:none;">
        <span style="background-color:{color};" class="g2-tooltip-marker"></span>
        {name}: {value}
        </div>
        ` // add
    });
    
    chart.axis('temperature', {
      label: {
        formatter: (val) => {
          return val; // edit
        },
      },
      title: {} // add
    });
    
    chart
      .line()
      .position('month*temperature')
      .color('city')
      .shape('smooth')
      .tooltip('month*temperature*city', function (month,temperature,city) {
        return {
          name: city,
          value: temperature + '°C'
        }
      }) // add
    
    chart
      .point()
      .position('month*temperature')
      .color('city')
      .shape('circle');	
    
    
    chart.render();
    
    
    展开全文
  • AntV G2 饼图

    2021-01-06 09:29:48
    import { Chart } from '@antv/g2'; const data = [ { type: '1岁', value: 340 }, { type: '2岁', value: 530 }, { type: '3岁', value: 620 }, { type: '4岁', value: 470 }, { type: '5岁', value: 190 }, ...
    import { Chart } from '@antv/g2';
    
    const data = [
      { type: '1岁', value: 340 },
      { type: '2岁', value: 530 },
      { type: '3岁', value: 620 },
      { type: '4岁', value: 470 },
      { type: '5岁', value: 190 },
    ];
    
    const chart = new Chart({
      container: 'container',
      autoFit: true,
    });
    
    chart.data(data);
    
    chart.coordinate('theta');
    
    const interval = chart
      .interval()
      .adjust('stack')
      .position('value')
      .color('type', ['#063d8a', '#1770d6', '#47abfc', '#38c060','green'])
      .label('type', (val) => {
        return {
          offset: -30,
          content: (obj) => {
            return obj.type + '\n' + obj.value;
          },
        };
      });
    
    chart.render();

    官方文档

    展开全文
  • antv g2 圆角堆叠柱状图 import { Chart, registerShape } from '@antv/g2'; function getFillAttrs(cfg) { return { ...cfg.defaultStyle, ...cfg.style, fill: cfg.color, fillOpacity: cfg.opacity, }; } ...
  • antv g2、g6 自定义扩展

    2021-04-30 14:10:42
    g2自定义 3d柱状图、分割柱状图及g6 自定义卡片
  • Vue使用antV G2简单实例

    千次阅读 2020-12-01 16:46:34
    工作中需要制作一个看板,选型选用antV G2进行开发。 由于项目前端是使用Vue,于是研究了antVG2在Vue中的使用。 1.安装antv/g2 在WebStrom下面Terminal中输入 npm install @antv/g2 --save 安装完成后为如下...
  • Antv G2实现点线图

    2021-06-25 11:36:11
    import { Chart, registerShape } from '@antv/g2'; // status决定线的颜色,type决定是否画圈圈 const data = [ { 'data0': "user1_test 发生告警了", 'status': 2, 'timestamp': "2021-06-23 15:29:00.000", ...
  • antV G2在vue中的使用

    2021-09-26 13:45:32
    import G2 from '@antv/g2'; //引入G2 import { Chart } from "@antv/g2"; //或者只引入需要用到的G2组件,我要用Chart const DataSet = require('@antv/data-set'); //antV中用DataSet作为数据集,可以对原始数据...
  • AntV G2 柱状图

    2020-12-31 18:14:51
    import { Chart } from '@antv/g2'; const data = [ { type: '1岁', value: 8400 }, { type: '2岁', value: 5300 }, { type: '3岁', value: 6200 }, { type: '4岁', value: 4200 }, { type: '5岁', value: ...
  • antv G2使用问题

    千次阅读 2020-05-07 10:34:46
    scale缩放 会造成G2 显示问题 (划入的提示信息 缩放50%时 滑到第二个柱状图还是第一个提示信息 !!echart 不会有此问题) 辅助元素的使用 很方便 可以做加文字 div图片等 自定义 formatter等 很方便 (很烦 能做...
  • AntV G2 折线图

    2021-01-05 17:18:17
    import { Chart } from '@antv/g2'; const data = [ { type: '1岁', value: 8400 }, { type: '2岁', value: 5300 }, { type: '3岁', value: 6200 }, { type: '4岁', value: 4200 }, { type: '5岁', value: ...
  • antv G2 折线图遇到的坑

    千次阅读 2020-06-24 16:20:05
    1. 数据很多时,图例显示不全: =》设置padding: 'auto' (自动计算边框,目前仅考虑 axis 和 legend 占用的边框) 2.图表绘制出来后,外部调用chart.filter()方法无效: =》再调用一次重绘图表chart.repaint();...
  • antV G2踩坑

    2020-08-13 17:16:14
    想将同一个分类的数据进行分组在一个范围内均匀分布时报如下错 先来看下报错解释 分析原因,因为传入的x轴数据为连续性的日期 ,阅读文档得知,当为连续性数据时不可以使用dodge。 解决方法 将x轴上的字段类型改为...
  • AntV G2 条形图

    2021-01-05 17:25:07
    import { Chart } from '@antv/g2'; const data = [ { type: '1岁', value: 340 }, { type: '2岁', value: 530 }, { type: '3岁', value: 620 }, { type: '4岁', value: 470 }, { type: '5岁', value: 190 }, ...
  • antv g2图表重新渲染

    2021-09-27 15:41:54
    antv g2官方网站提供的方法changeData 具体步骤: 1.按需引入使用的图表:import { Bar } from '@antv/g2plot' 2.定义包裹容器<div id="echart"></div> 3.声明挂载对象chartChange 4.定义数据(调用接口...
  • antV G2 会比较多的API 查看起来也比较费时间,所以把一些常有的方法,参数,指标列举,方便运用 01,柱状图两边留空间 // time 是横坐标的 指标 chart.scale('time', { range: [0.05, 0.95] }) 02,自定义纵坐标...
  • AntV G2坚持自然、确定性、意义感、生长性的设计价值观。与其他可视化插件不同的是,G2是以数据驱动的高交互可视化图形语法,具有高度的易用性和可扩展性。 随着业务可视化不断发展,数据复杂度越来越高。实现一个...
  • https://g2plot.antv.vision/zh/docs/manual/introduction AntV家族包括以下产品,可以在蚂蚁金服官方网站查看https://antv.vision/zh 环境搭建 关于Nodejs和vue环境的搭建可以参照前述文章https
  • 运行程序 上一节使用vue create创建好项目cd antv-g2-admin,也引入了Antd和Antvg2plot,直接运行程序 cd antv-g2-admin npm run serve 打开浏览器输入http://localhost:8080/,可看到Vue的官网示例首页 修改页面 ...
  • antv-g2.chm

    2020-07-25 16:50:32
    angular antv-g2官网的帮助文档本地缓存做成的离线文档,可以在不联网的状态下查看帮助手册,方便内网的同事们做参考手册,基于g2-3.0版本
  • import React, { useState, useEffect, ...import { Chart } from "@antv/g2"; const Charts = () => { const chartRef = useRef() const data = [ { name: "杭州银行", score: 2, num: 5, city: "bj" }, .
  • antv G2柱状图

    千次阅读 2020-04-07 09:23:35
    一、首先需要引用antv-g2. 1.直接在html引用外部js文件,<script src=’‘相对路径’’> 2.如果是vue,需要安装 npm install @antv/g2 --save 但是在vscode安装后,按照提示修复一下就行了 二、初始化柱状体...
  • Echarts地图的下架与Antv g2初体验

    千次阅读 2020-05-12 15:17:16
    Echarts地图的下架,对于好多人来说是措手不及的,原有版本的项目,即便有了新的地图需求,也会考虑一些现有的进行替代,今天就给大家看一下,我们是如何使用Antv g2进行替换的。 最近接到一个需求,【显示某个月份...
  • 其中有一个需求就是让 通过antv g2绘制出的环图动起来,主要是动态改变图标每一项的样式,以及中间的Annotation。 基本样式就是这样 主要是要让他动态的放大某项并且中间的annotation也要展示对应已经放大项的数据...
  • 使用技术: antv g2 地图文件:https://gw.alipayobjects.com/os/antvdemo/assets/data/china-provinces.geo.json 该文件可以直接在线引入,也可以下载到本地使用,在这里我是直接下载到本地的 html代码 <...
  • 关于antv g2柱状图的那些事 技术栈:react+antv g2 渲染基础柱状图: import React, { Component } from 'react' import { Chart } from '@antv/g2'; export class BarChart extends Component { componentDidMount...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,432
精华内容 572
热门标签
关键字:

antvg2