Angular2 G2柱状图简单参数设置
2020-03-26 08:17
1176 查看
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 { @Input() chartOption: any; private chart: G2.Chart; constructor(private el: ElementRef) { } ngOnInit(): void { 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, animate: false }); this.chart.source(data); this.chart.scale( { type: { alias: '部位' }, value: { alias: '患者数量(个)' } } ); //Sets coordinate axis. this.chart.axis('type', { title: { textStyle: { textAlign: 'center', fill: '#cfcfcf' } }, line: { lineWidth: 1, stroke: '#000' }, label: { offset: 16, textStyle: { fill: '#cfcfcf', fontSize: '11' } } }); this.chart.axis('value', { title: { textStyle: { textAlign: 'center', fill: '#cfcfcf' } }, line: { lineWidth: 1, stroke: '#000' }, label: { offset: 12, textStyle: { fill: '#cfcfcf', fontSize: '11' } } }); this.chart.interval().position('type*value'); // 渲染图表 this.chart.render(); } }
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- angular使用Http和HttpClient设置查询参数的区别
- 数据库连接驱动介绍及参数简单设置
- 用angular-file-upload在上传文件的时候动态设置一同发送的参数
- JFreeChart 柱状图参数设置方法
- 简单的回归与预测 & matplotlib坐标轴设置参数(刻度值、间隔)
- flex-设置简单的柱状图ColumnChart(一)
- dhtmlTree简单实例以及基本参数设置
- parquet压缩格式参数设置以及简单操作
- Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数
- plotly绘制简单图形--用plotly画图参数设置
- python柱状图参数设置
- jfreeChart柱状图参数设置
- JFreeChart简单例子_创建柱状图(当遇到中文乱码时,将各个部分的字体分别设置一下就行了)
- dhtmlTree简单实例以及基本参数设置
- JFreeChart 柱状图参数设置方法
- python数据分析-柱状图绘制及常用参数设置
- ServerSocket的一个简单例子,学习backlog参数的设置,即可以接受客户端的数量
- jfreechart柱状图参数设置
- linux基础之shell编程(3)-给脚本设置参数
- UnityShader开发之光照 - 简单光照模型 - Phong反射光模型参数分析