Angular2 使用G2画图表
2020-03-26 08:17
3003 查看
安装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 "@angular/core"; import * as G2 from '@antv/g2'; @Component({ selector: 'barChart-component', templateUrl: './bar-chart.component.html', }) export class BarChartComponent implements OnInit { chartOption: any; private chart: G2.Chart; constructor(private el: ElementRef) { } ngOnInit(): void { this.chartOption = [ { genre: '肺部', sold: 275 }, { genre: '肾脏', sold: 115 }, { genre: '心脏', sold: 120 }, { genre: '肝脏', sold: 350 }, { genre: '胃部', sold: 150 } ]; const chartContainer = this.el.nativeElement.querySelector('#barChartContainer'); var data = this.chartOption; this.chart = new G2.Chart({ container: chartContainer, //Sets chart container width: 600, // 指定图表宽度 height: 400 // 指定图表高度 }); this.chart.source(data); this.chart.interval().position('genre*sold').color('genre'); // 渲染图表 this.chart.render(); } }
效果图
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- angular 在TypeScript 中使用 ECharts 图表
- 问题解决 : Angular8 引入G2图表库后控制台报错 Please specify the container for the chart
- 在vue中使用G2图表的示例代码
- Angular2.0/4.0 使用Echarts图表的示例代码
- WPF中使用Echarts显示图表
- ionic2 项目中使用echarts图表,Jquery
- Python图表软件包ChartDirector的安装和使用
- Wpf/Wp/Silverlight-Chart图表控件:柱状图、饼状图等使用汇总
- Qt使用QWT绘制科学图表和图形
- 使用ECharts绘制可视化图表
- 微软MSChart图表插件使用
- 使用JFreeChart生成热点图表
- C# MSChart图表控件使用介绍
- php中使用FusionCharts制作嵌入网页图表
- Angular前端项目(使用ng-zorro组件库)
- iOS 使用 Core Plot 绘制统计图表入门
- Angular.js中使用$watch监听模型变化
- VS2013 TeeChart_v5 MFC C++ 使用手册干货(二)TeeChart 实时数据图表
- eCharts使用图表简单示例
- 使用Angular CLI生成 Angular 5项目教程详解