我正在使用ng4图表。 https://www.npmjs.com/package/ng4-charts
我将数据集声明为空数组,但是在将新数据分配给变量后,图表不会得到刷新。
我的源代码如下
型号
TimesheetLogged.ts
export interface TimesheetLogged {
ProjectId: string,
MondayHours: number,
TuesdayHours: number,
WednesdayHours: number,
ThursdayHours: number,
FridayHours: number,
SaturdayHours: number,
SundayHours: number
}
Project.ts
import { TimesheetLogged } from "./TimesheetLogged";
export interface Project {
ProjectId: number;
TimeLoggedHours: TimesheetLogged[];
}
组件中的代码片段
@Component({
selector: 'timelog',
templateUrl: '/app/Component/timelog.html'
})
export class TimeLogComponent implements OnInit {
.
.
.
.
public barChartLabels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
public barChartType = 'bar';
public barChartLegend = true;
public barChartData = [
{ data: [0, 0, 0, 0, 0, 0, 0] }
];
public Projects: Project[];
//Get projects data from database and subscribe to Projects object Successfully
let chartData: Array<number> = [];
let mon:number= 0;
let tue:number= 0;
let wed:number= 0;
let thu:number= 0;
let fri:number= 0;
let sat:number= 0;
let sun:number= 0;
this.Projects.forEach(empHours => {
empHours.TimeLoggedHours.forEach(hours => {
mon += hours.MondayHours;
tue += hours.TuesdayHours;
wed += hours.WednesdayHours;
thu += hours.ThursdayHours;
fri += hours.FridayHours;
sat += hours.SaturdayHours;
sun += hours.SundayHours;
});
});
chartData.push(mon);
chartData.push(tue);
chartData.push(wed);
chartData.push(thu);
chartData.push(fri);
chartData.push(sat);
chartData.push(sun);
this.barChartData[0].data = chartData;
.
.
.
}//End of Component
html
<div class="row">
<canvas baseChart
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"></canvas>
</div>