0
が必要です。 （ライトの場所にそれを追加することはできません）統計をチームする棒グラフを実装することはできません：チーム3の棒グラフの実装では、角度2のビューアプリケーション
var team = [];
team = teams.teams;
for (var i = 0; i < team.length; i++) {
var dataset = [];
dataset = [team[i].spAchieved, team[i].spEstimated];
// console.log(dataset);
var w = 100;
var h = 100;
var barPadding = 1;
var svg = d3.select("#chart")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * (w/dataset.length))
.attr("y", d => h - d)
.attr("width", w/dataset.length - barPadding)
.attr("height", d => d)
.attr("fill", (d) => "rgb(100, 0, " + (d * 5) + ")");
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(d => d)
.attr("x", (d, i) => i * (w/dataset.length) + 15)
.attr("y", d => h - (d * 4) + 45);
};
そしてHTML：
<div class="jumbotron text-center" *ngIf="user">
<h1>TEAM View</h1>
<div class="layer1">
<a class="btn btn-primary" [routerLink]="['/profile']">{{user.name}}</a>
</div>
<div class="layer2">
<a class="btn btn-primary" [routerLink]="['/addteam']">Add New Team</a>
</div>
<div id="chart">
<ul class="list-group" *ngFor="let newTeam of teams;">
<div *ngFor="let team of newTeam;">
<li class="list-group-item">Team Name: {{team.teamName}}</li>
<li class="list-group-item">Sprint Number: {{team.sprintNumber}}</li>
<li class="list-group-item">Completed At: {{team.completedAt}}</li>
<li class="list-group-item">Completed: {{team.completed}}</li>
<li class="list-group-item">SP Achieved: {{team.spAchieved}}</li>
<li class="list-group-item">SP Estimated: {{team.spEstimated}}</li>
<svg class="chart" #chart></svg>
<br/><br/>
</div>
</ul>
</div>
だから今のために、その番組div内のすべてのチャート、 idからbodyに変更された場合は、liになり、ヘッダーにはspAchievedとspEstimatedに実装できません。ありがとう
デバッガで正しく動作しますが、実行終了時にグラフを保存しません。
今のコードは次のようになります。
import { Component, AfterViewInit, AfterContentInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Router } from "@angular/router";
import * as d3 from "d3-selection"; //
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements AfterViewInit, AfterContentInit {
user: Object;
teams: any;
//teamName: Object;
constructor(
private authService: AuthService,
private router: Router
) { }
ngAfterContentInit() {
this.authService.getProfile().subscribe(profile => {
this.user = profile.user;
},
err => {
console.log(err);
return false;
});
this.authService.getAllTeams().subscribe(teams => {
// console.log(teams);
this.teams = Object.keys(teams).map(key => teams[key]);
// console.log(this.teams);
},
err => {
console.log(err);
return false;
});
}
ngAfterViewInit() {
//Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
//Add 'implements AfterViewInit' to the class.
this.authService.getAllTeams().subscribe(teams => {
// console.log(teams);
this.teams = Object.keys(teams).map(key => teams[key]);
// console.log(this.teams);
const canvas =() => {
this.teams = Object.keys(teams).map(key => teams[key]);
var team = [];
team = teams.teams;
for (var i = 0; i < team.length; i++) {
var dataset = [];
dataset = [team[i].spAchieved, team[i].spEstimated];
// dataset =
// console.log(dataset);
var w = 100;
var h = 100;
var barPadding = 1;
var j = 0;
// var svg = d3.select("#chart .list-element:nth-child(" + (i + 1) + ")")
// var svg = d3.select("li")
// console.log("#chart .list-element:nth-child(" + (i +1) +") .graph");
var svg = d3.select("#chart .list-element:nth-child(" + (i+1) +") .graph")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * (w/dataset.length))
.attr("y", d => h - d)
.attr("width", w/dataset.length - barPadding)
.attr("height", d => d)
.attr("fill", (d) => "rgb(100, 0, " + (d * 5) + ")");
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(d => d)
.attr("x", (d, i) => i * (w/dataset.length) + 15)
.attr("y", d => h - d);
};
}
canvas();
},
err => {
console.log(err);
return false;
});
}
}
そしてHTML
<div class="jumbotron text-center" *ngIf="user">
<h1>TEAM View</h1>
<div class="layer1">
<a class="btn btn-primary" [routerLink]="['/profile']">{{user.name}}</a>
</div>
<div class="layer2">
<a class="btn btn-primary" [routerLink]="['/addteam']">Add New Team</a>
</div>
<div id="chart">
<ul class="list-group" *ngFor="let newTeam of teams;">
<div class="list-element" *ngFor="let team of newTeam;">
<li class="list-group-item">Team Name: {{team.teamName}}</li>
<li class="list-group-item">Sprint Number: {{team.sprintNumber}}</li>
<li class="list-group-item">Completed At: {{team.completedAt}}</li>
<li class="list-group-item">Completed: {{team.completed}}</li>
<!-- <li class="list-group-item">SP Achieved: {{team.spAchieved}}</li>
<li class="list-group-item">SP Estimated: {{team.spEstimated}}</li> -->
<!-- <svg width="100" height="100" class="chart" #chart></svg> -->
<div class="graph">
</div>
<br/><br/>
</div>
</ul>
<!-- -->
</div>
</div>
問題、今のところ、残りbefor実行D3コードにあったので、私はngOnInit
を変更