代码之家 › 专栏 › 技术社区 › core114

在Angular6中隐藏Chart.js标签

angular6 chart.js

0

core114 · 技术社区 · 6 年前

我用我的 角度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>

// 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);
  }

}

1 回复 | 直到 6 年前

1

2

core114 6 年前

我解决了我的问题,

我用过这个 [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>

// 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;