无法将新数据集分配给ng4图表

时间:2018-11-27 12:18:59

标签: html angular typescript ng4-charts

我正在使用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>

0 个答案:

没有答案