Я использовал немного другой подход при создании объекта диаграммы.Я создал разные объекты для разных функций диаграммы и использовал привязку данных.Мне удалось заполнить каждый раздел диаграммы, кроме цветов панели.Это гистограмма с накоплением.Возможно, мне понадобится другой подход, но я надеялся, что кто-нибудь скажет мне, почему он не работает.Я включу макет в Html и Typescript вместе с моим пользовательским объектом.Как примечание, я пробовал разные цвета, поэтому я изменил его на одно значение, чтобы ускорить его тестирование.Я пытаюсь сказать, что эта гистограмма с накоплением должна выглядеть как обычная гистограмма, но позже у меня будет несколько цветов гистограммы, когда цвета для каждого статуса будут определены для моего проекта.Я извиняюсь, если эта последняя часть сбивает с толку, но каждый объект TrendResult имеет тот же backgroundColor в приведенном ниже коде, но будет динамичным в будущем.
HTML:
<div *ngIf="!isExpanded">
<div class="trend-chart-container-collapsed">
<canvas
baseChart
[datasets]="chartData"
[labels]="chartLabels"
[chartType]="chartType"
[options]="chartOptions"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"
></canvas>
</div>
</div>
Typescript компонента:
trendData: TrendData;
testResults: TestResult[];
isExpanded = false;
public chartLabels: string[] = [];
public chartData: VerificationTestTrendResult[] = [];
public chartType = 'bar';
public chartOptions: any = {
'responsive': true,
'maintainAspectRatio': true,
'align': center,
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
};
loadCard(): void {
console.log('Creating trend card component.');
this.trendData = this.myService.getTrendData();
this.testResults = this.myService.getTestResultData();
const testStatuses = new Array();
const designList = new Array();
this.testResults.forEach(testResult => {
if (!testStatuses.includes(testResult.testResult.toString())) {
testStatuses.push(testResult.testResult.toString());
}
if (!designList.includes(testResult.Name)) {
designList.push(testResult.Name);
this.chartLabels.push(testResult.Name);
}
});
testStatuses.forEach(testStatus => {
const chartDataGroup = new TrendResult(testStatus, '#FF6384');
designList.forEach(chartLabel => {
const statusCount = this.testResults.filter(testResult =>
testResult.Name.toString() === chartLabel && testResult.testResult === testStatus
).length;
console.log('Adding result ' + chartLabel + ' for design ' + testStatus + ' at a count of ' + statusCount.toString());
chartDataGroup.addResult(statusCount);
});
console.log('Adding chart data group: ' + chartDataGroup.toString());
this.chartData.push(chartDataGroup);
});
Машинопись объекта
export class TrendResult {
label: string;
backgroundColor: string;
data: number[] = [];
constructor(design: string, backgroundColor: string) {
this.label = design;
this.backgroundColor = backgroundColor || 'rgba(0, 99, 132, 0.2)';
}
addResult(data: number): void {
this.data.push(data);
}
}