如何从 ng2-chart(chart.js) 中删除标签

Question

我实现了一个多文件上传 UI，它使用 chart.js。 用于显示上传进度的圆环图。 我将图表实现为一个名为“accuracy-chart”的新组件，以便每个人都可以在需要时重用该组件。 但是当我减小包含这个组件的容器的大小时，组件的标签溢出了 div 并且 UI 被破坏了。 如何从图表中删除该标签。 当我删除 label 属性时，它会在标签中显示“未定义”。

该问题以黄色草图标记。

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> 

精度图表.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>

准确性-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}];
    }
  }
}

准确度-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;
        }
    }
}

Answer 1

与其不传递 label，不如传递一个空字符串以不显示 label