Я реализовал пользовательский интерфейс для загрузки нескольких файлов, и он использует chart.js. Кольцевая диаграмма, используемая для отображения прогресса загрузки. Я реализовал диаграмму как новый компонент, названный диаграммой точности, чтобы каждый мог повторно использовать компонент при необходимости. но когда я уменьшил размер контейнера, содержащего этот компонент, метки компонента вышли за пределы div, и пользовательский интерфейс стал нарушаться. Как я могу удалить эти метки с диаграмм. когда я удаляю атрибут метки, в метках отображается «undefined».
Проблема отмечена желтым эскизом.
HTML-код, содержащий диаграмму точности
<div class="upload-progress">
<app-accuracy-chart *ngIf="file.uploadProgress != 100 && !file.uploadFailed" [large]="false" [data]="file.uploadProgress" [color]="['#00ca7d', '#546e7a']" [doughnutChartLabelInfo] = "['completed', 'remaining']" style="width: 80px; height: 40px;"></app-accuracy-chart>
</div>
precision-chart.component.html
<div class="accuracy-chart" [ngClass]="{'large': large}">
<canvas baseChart [data]="doughnutChartData" [legend]="false" [chartType]="doughnutChartType" [colors]="doughnutChartColors" [labels]="doughnutChartLabelInfo" (chartHover)="chartHovered($event)" [options]="doughnutChartOptions" style="position: relative;z-index: 99;"></canvas>
<span *ngIf="!showIcon" class="data-val">{{this.data | number: '1.0-0'}}</span>
<span *ngIf="showIcon" class="data-icon iconB-rocket-launch"></span>
<span *ngIf="showTrainProgressIcon" class="data-icon training-icon"></span>
</div>
precision-chart.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-accuracy-chart',
templateUrl: './accuracy-chart.component.html',
styleUrls: ['./accuracy-chart.component.scss']
})
export class AccuracyChartComponent implements OnInit {
@Input() large;
@Input() data;
@Input()color;
@Input()showIcon;
@Input()showTrainProgressIcon;
@Input()doughnutChartLabelInfo:any;
constructor() { }
// Doughnut
//public doughnutChartLabels: string[] = this.doughnutChartLabelInfo;
public doughnutChartColors: Array<any> = [{ backgroundColor: ["#ffc062", "#e4e4e4"] }];
public doughnutChartData: number[] = [0, 0];
public doughnutChartType: string = 'doughnut';
// layout: {
// padding: {
// left: 5,
// right: 0,
// top: 0,
// bottom: 0
// }
// }
//traffic bar chart
public doughnutChartOptions: any = {
cutoutPercentage: 70,
}
ngOnInit() {
this.doughnutChartData = [this.data, (100 - this.data)];
if (this.large) {
this.doughnutChartColors = [{ backgroundColor: ["#50e39a", "#e4e4e4"] }];
}
else{
this.doughnutChartColors = [{ backgroundColor: this.color}];
}
}
public chartHovered(event) {
}
//To relead chart
reloadData(chartData){
this.doughnutChartData = [chartData, (100 - chartData)];
if (this.large) {
this.doughnutChartColors = [{ backgroundColor: ["#50e39a", "#e4e4e4"] }];
}
else{
this.doughnutChartColors = [{ backgroundColor: this.color}];
}
}
}
precision-chart.component.scss
.accuracy-chart {
position: relative;
// width: 180px;
// height: 90px;
width: 117px;
height: 58px;
margin-top: -7px;
&.large {
width: 260px;
height: 130px;
margin-top: -10px;
.data-val {
font-size: 25px !important;
z-index: -1;
}
}
.data-val {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 13px;
line-height: 30px;
}
.data-icon {
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// font-size: 30px;
// line-height: 30px;
width: 39px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background: white;
border-radius: 50%;
position: absolute;
top: 15%;
left: 33%;
font-size: 30px;
line-height: 30px;
}
.training-icon {
background-color: #00ca7d;
&:before {
content: "\74";
font-family: "cira";
font-size: 22px;
position: relative;
top: 4px;
color: #fff;
}
}
}