G2--1 把G2引入angular项目

最新推荐文章于 2021-09-18 08:50:27 发布

蒲公英

最新推荐文章于 2021-09-18 08:50:27 发布

阅读量574

点赞数

CC 4.0 BY-SA版权

分类专栏： G2 文章标签： angular

本文链接：https://blog.csdn.net/weixin_45158253/article/details/114670152

G2 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在Angular项目中引入并使用G2图表库，实现数据可视化。通过安装G2、创建图表组件和加载数据，最终绘制出柱状图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

把G2引入angular项目

1、安装

npm install @antv/g2 --save

2、引入

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

之后就是使用了

使用

创建一个组件，并在这个组件内引入g2。

1、创建 div 图表容器

<div id="c1"></div>

2、创建 Chart 对象

const chart = new Chart({
  container: 'c1', // 指定图表容器 ID
  width: 600, // 指定图表宽度
  height: 300, // 指定图表高度
});

3、载入数据源

const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];
// data是已经创建好的变量
chart.data(data);

4、创建图形语法，绘制柱状图

chart.interval().position('genre*sold');

5、渲染图表

chart.render();

写个方法，包括2~5步骤，然后在ngoninit（）里调用这个方法就行
完整代码：

import { Component, OnInit } from '@angular/core';
import { Chart } from '@antv/g2';

@Component({
  selector: 'app-antv',
  templateUrl: './antv.component.html',
  styleUrls: ['./antv.component.less']
})
export class AntvComponent implements OnInit {

  data: any = [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ];
  constructor() { }

  ngOnInit(): void {
    this.graph1();
  }
  // tslint:disable-next-line:typedef
  graph1() {
    // Step 1: 创建 Chart 对象
    const chart = new Chart({
      container: 'container', // 指定图表容器 ID
      width: 600, // 指定图表宽度
      height: 300, // 指定图表高度
    });

    // Step 2: 载入数据源
    chart.data(this.data);

    // Step 3: 创建图形语法，绘制柱状图
    chart.interval().position('genre*sold');

    // Step 4: 渲染图表
    chart.render();

  }

}

效果：
在这里插入图片描述