Angular 入门教程系列：32：统计图表G2

最新推荐文章于 2024-07-07 12:01:19 发布
最新推荐文章于 2024-07-07 12:01:19 发布
阅读量9.3k 收藏 2
点赞数
分类专栏： # 前端 # Angular快速入门
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liumiaocn/article/details/81449587
版权
本文是Angular入门教程的一部分，介绍了如何利用G2库创建统计图表，特别是柱状图来展示一周内每天的bug数量。文章涵盖了安装G2、在Angular中引入、设置图表数据以及关闭G2的统计信息收集功能。
摘要由CSDN通过智能技术生成

G2是蚂蚁金服下的一款开源可视化的前端组件库，使用G2可以很简单地根据数据创建出统计图表，这篇文章中会使用简单的例子来创建一个柱状图，用于显示某一星期七天不断出现的bug数目。

安装g2

从版本3开始，data-set进行了分离，简单的方式可以不直接使用data-set，可以不必安装@antv/data-set，这篇文章便没有安装data-set

liumiaocn:ng6demo liumiao$ npm install @antv/g2 --save
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.

+ @antv/g2@3.2.6
added
最低0.47元/天 解锁文章
淼叔
关注
专栏目录
[Angular]——快速创建框架模板
虽菜但瘾
09-10 625
Angular搭建模板框架 前言：网络不好，可以使用国内淘宝镜像。本模板的脚手架使用Ng Alain，本地环境需要安装 node 和 git。技术栈基于 Typescript、Angular、g2、@delon 和 ng-zorro-antd。 配置国内镜像： 打开终端，输入 npm config get registry 来查看当前地址 更改地址：npm config set registry https://registry.npm.taobao.org 安装（推荐CLI） 创建项目：ng
用angular Material 做统计表格
qq_50780641的博客
03-30 6210
用angular Material 做统计表格 安装 Angular Material、组件开发工具 (CDK) 和 Angular 动画库，并运行代码原理图 ng add @angular/material 表格原理图将创建一个组件，它可以渲染出一个预置了可排序、可分页数据源的 Angular Material ng generate @angular/material:table texe1 然后在这的基础上进行修改。 该组件的html文件 <div class="mat-elevation
Angular2 使用G2画图表
qq_21209307的博客
03-09 896
安装G2包 npm install @antv/g2 --save 在使用的组件中import import * as G2 from '@antv/g2'; HTML <div id="barChartContainer" ></div> TS import { Component, OnInit, Input, ElementRef } from "@angula...
2024-Angular保姆级教程 - 1
最新发布
qq_37779333的博客
07-07 965
Angular 是一个使用 HTML、CSS、TypeScript 构建客户端应用的框架，用来构建单页应用程序。Angular 是一个重量级的框架，内部集成了大量开箱即用的功能模块。Angular 为大型应用开发而设计，提供了干净且松耦合的代码组织方式，使应用程序整洁更易于维护。AngularAngular 中文需求：为元素设置默认背景颜色，鼠标移入时的背景颜色以及移出时的背景颜色。
在angular框架用ngx-echarts做统计图
qq_50780641的博客
03-30 1178
在angular框架用ngx-echarts做统计图 安装ngx-echarts npm install echarts -S npm install ngx-echarts -S 在app module中相对应的位置import NgxEchartsModule import { NgxEchartsModule } from 'ngx-echarts'; @NgModule({ imports: [ NgxEchartsModule.forRoot({ echarts: ()
G2--1 把G2引入angular项目
web
03-11 499
把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, //
在angular框架用g2库做统计表
qq_50780641的博客
03-30 1247
在angular框架用g2库做统计表 首先进行g2的安装 npm install @antv/g2 --save 在需要用到g2的组件中的ts文件中import import * as G2 from '@antv/g2'; 该组件的html文件 <div id="统计图" ></div> 该组件的ts文件的完整代码 import { Component, OnInit } from '@angular/core'; import * as G2 from '@antv/g2
angular简单的echarts图表省份、设备、人员统计
08-01
初始学习angular，刚好公司项目用到，省份，地区，设备，人员，等一系列需要关联统计，比如，点击某个省市，可以查看当前设备，人员，地址，在线统计，利用百度开源的Echarts图表绘图，显示统计出来的。
angular+echart.js统计数据图表读取投屏显示代码
06-11
angular+echart.js统计数据图表读取投屏显示代码，html5统计图表实现数据投屏页面显示效果。
Angular 入门教程系列：33：移动端统计图表F2
知行合一 止于至善
08-07 5272
F2应该就是Fast &amp;amp; Flexible的缩写，从名称上就能看出其所关注的场景。F2也是蚂蚁金服下的一款开源可视化的前端组件库，使用F2可以很简单地根据数据创建出统计图表，F2源于早期的G2-Mobile，所以它是针对于移动端的。移动端有很多需要考虑的因素，比如：性能/大小/扩展性等。这篇文章中会使用简单的例子来创建一个柱状图，用于显示某一星期七天不断出现的bug数目。 安装f2 ...
Angular 入门教程系列：44：Karma使用介绍
知行合一 止于至善
10-31 3910
在前一篇文章中介绍了Jasmine框架在Angular中的使用，而无法避开的另外一个部分就是Karma，这篇文章将继续通过demo应用来介绍Karma在Angular中的运用。
Angular 入门教程系列：43：Jasmine使用介绍
知行合一 止于至善
10-29 1964
在Angular中进行单体测试，使用的是Jasmine，这篇文章将就ng new demo所生成出来的代码为例进行说明Angular中是如何使用Jasmine进行单元测试的。
Angular 入门教程系列：42：单元测试与端到端测试
知行合一 止于至善
10-29 1404
Angular Cli提供ng test和ng e2e进行单元测试，在这篇文章中首先通过具体的示例来直观感受一下使用方式。
【AngularJs】---angular-chart.js 图表报表
weixin_30745641的博客
12-29 190
移步至我在百度经验的这篇文章： http://jingyan.baidu.com/article/a378c960b26636b3282830ad.html 转载于:https://www.cnblogs.com/itguliang/p/5085832.html
Angular + G2[AntV] 01
Lance1ot的博客
12-26 1581
Angular + G2[AntV] 01目的步骤 目的 之前使用过ng-alain，发现这里面整合的G2图表不那么完全，所以自己试着单独整合Angular+G2 步骤 按照官网的说明： 1.通过npm安装 npm install @antv/g2 --save 2.在html中 <div id="c1"></div> 3.在ts文件中 import G2 from '...
python结合G2绘制精美图形
cbbing的专栏
08-08 2861
一、简介G2是阿里巴巴内部开放的数据可视化工具，提供丰富的图表类型，并且简单易上手，有比较完善的示例代码。其生成的图表简单漂亮，而且有JS互动显示，比较适合报告和文章插图。G2的数据来源是json格式数据。G2绘制的图形python的pandas库比较擅长对数据处理和分析，其DataFrame生成json也很方便。pandas自身集成了matplotlib的绘图功能，但是绘制的图形没有G2美观。
AntV G2的绘图流程
李 克 鹏 的 博客
05-31 699
学习目标： 提示：这里可以添加学习目标 例如：一周掌握 Java 入门知识 学习内容： 提示：这里可以添加要学的内容 例如： 1、 搭建 Java 开发环境 2、 掌握 Java 基本语法 3、 掌握条件语句 4、 掌握循环语句 学习时间： 提示：这里可以添加计划学习的时间 例如： 1、 周一至周五晚上 7 点—晚上9点 2、 周六上午 9 点-上午 11 点 3、 周日下午 3 点-下午 6 点 学习产出： 提示：这里统计学习计划的总量 例如： 1、 技术笔记 2 遍 2、CSDN 技术博客
Angular完整项目开发13 - 使用图表（ng2-charts+chart.js）
小鹰信息技术服务部
04-28 1911
Angular项目原型的主体功能差不多了，接下来添加一些其他功能，从图表开始。 图表的库有多种选择，我选了ng2-chart，这名字听上去就是给Angular御用的，虽然实际做下来发现坑不少。 1.安装ng2-charts和chart.js 这一步巨坑，如果直接安装，默认会用最新版本，然后各种报错，折腾了三个晚上。最后发现居然是版本不兼容，所以只能指定版本安装。坑！ npm install ng2-charts@2.3.0 --save npm install chart.js@2.9.3 --s
Angular 2入门教程：构建简单应用与组件
总结，这份AngularJS2入门教程从基础知识讲起，逐步深入，涵盖了Angular 2的关键特性，如TypeScript、组件化开发、数据绑定和模块化管理，适合希望通过实际项目学习该框架的开发者。通过跟随教程，读者能够掌握构建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值