您的位置:首页 > Web前端 > AngularJS

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();

}

}
  • 点赞
  • 收藏
  • 分享
  • 文章举报
Will Wang0715 发布了62 篇原创文章 · 获赞 0 · 访问量 730 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: