我用角型打字稿实现了一个静态的堆叠条形图 我想从服务从后端获取的列表中的x和y轴上加载动态数据。
this.initMargins();
this.initSvg();
this.List = this.route.snapshot.data['list'];
this.bindStatusDropdown();
this.data =
[{ year: "2006", Timeremainng: 10, overdeadline: 5, noticeperiod: 9, completed: 4 },
{ year: "2007", Timeremainng: 12, overdeadline: 8, noticeperiod: 9, completed: 4 },
{ year: "2008", Timeremainng: 4, overdeadline: 40, noticeperiod: 5, completed: 5 }];
this.drawChart(this.data);` private initSvg() {
this.svg = d3.select('svg');
this.width = +this.svg.attr('width') - this.margin.left - this.margin.right;
this.height = +this.svg.attr('height') - this.margin.top - this.margin.bottom;
this.g = this.svg.append('g').attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
this.x = d3Scale.scaleBand()
.domain(this.data.list(function (d) {
return d.year;
})
.rangeRound([5, 100])
.paddingInner(1)
.align(0.1));
this.y = d3Scale.scaleLinear()
.domain(this.data.list(function (d) {
return d.inspection;
})
.rangeRound([this.height, 0]));
this.z = d3Scale.scaleOrdinal()
.range(['#1f77b4', '#2ca02c', '#ff7f0e', '#0038FF']);
}`