Question

我将我的角度6 项目用于Chart.js

图表运行良好，但是我想知道如何正确隐藏在此doughnutChartLabels中，我尝试这样做legend: {display: false} 但它不起作用，任何人都知道如何正确地做到这一点

.html

<canvas baseChart
                    [data]="doughnutChartData"
                    [labels]="doughnutChartLabels"
                    [options]="doughnutOptions"
                    [chartType]="doughnutChartType"
                    (chartHover)="chartHovered($event)"
                    (chartClick)="chartClicked($event)"></canvas>
          </div>

.ts

// Doughnut chart


  public doughnutChartLabels:string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
  public doughnutChartData:number[] = [350, 450, 100];
  public doughnutChartType:string = 'doughnut';
  responsive: true;

  public doughnutOptions: { percentageInnerCutout: 70 ,   legend: {display: false}
  }// make doughnut chart slim

  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

  public chartHovered(e:any):void {
    console.log(e);
  }

}

谢谢

Answer 1

我已解决问题，

我使用了这个[legend]="doughnutChartLegend"

.html

<canvas baseChart
                        [data]="doughnutChartData" [labels]="doughnutChartLabels"
                        [options]="doughnutChartOptions" [legend]="doughnutChartLegend"
                        [chartType]="doughnutChartType"
                        [colors]="[{backgroundColor: ['rgb(116, 90, 242)', 'rgb(30, 136, 229)', '#06d79c', 'rgb(236, 239, 241)']}]"
                        (chartHover)="chartHovered($event)"
                        (chartClick)="chartClicked($event)"></canvas>

.ts

// Doughnut
  public doughnutChartLabels: string[] = [
    'Total',
    'Vacant Dirty',

  ];
  public doughnutChartOptions: any = {
    borderWidth: 2,
    maintainAspectRatio: true,
   cutoutPercentage: 55,
  };
  responsive: true;
  public doughnutChartData: number[] = [51, 1];
  public doughnutChartType: string = 'doughnut';
  public doughnutChartLegend: boolean = false;

在Angular6中隐藏Chart.js标签

1 个答案: