ngx饼图未在Angular应用程序的浏览器中显示图表答案

【问题标题】：ngx pie chart not showing chart in the browser in Angular appngx饼图未在Angular应用程序的浏览器中显示图表
【发布时间】：2022-01-09 18:02:26
【问题描述】：

我一直试图在我的 Angular 应用程序中显示图表，但由于某种原因它没有显示在浏览器中。我的 package.json 看起来像这样。

"dependencies": {
    "@angular/animations": "~13.1.1",
    "@angular/common": "~13.1.1",
    "@angular/compiler": "~13.1.1",
    "@angular/core": "~13.1.1",
    "@angular/fire": "^7.2.0",
    "@angular/forms": "~13.1.1",
    "@angular/material": "^13.1.1",
    "@angular/platform-browser": "~13.1.1",
    "@angular/platform-browser-dynamic": "~13.1.1",
    "@angular/router": "~13.1.1",
    "@swimlane/ngx-charts": "^20.0.1",
    "@swimlane/ngx-datatable": "^20.0.0",

  },

home.component.html：

<div class="card">
                <ngx-charts-pie-chart
                    [view]="view"
                    [scheme]="colorScheme"
                    [results]="arr"
                    [gradient]="gradient"
                    [legend]="showLegend"
                    [legendPosition]="legendPosition"
                    [labels]="showLabels"
                    [doughnut]="isDoughnut"
                    (select)="onSelect($event)"
                    (activate)="onActivate($event)"
                    (deactivate)="onDeactivate($event)"
                >
                
                </ngx-charts-pie-chart>
            </div>

home.component.ts:

export class HomeComponent implements OnInit {
    arr = [
        {"name": "Male", "value": 101},
        {"name": "Female", "value": 99}
    ]
    view: any[] = [200, 400];

    // options
    gradient: boolean = true;
    showLegend: boolean = true;
    showLabels: boolean = true;
    isDoughnut: boolean = true;
    legendPosition: string = 'below';

    colorScheme = {
        domain: ['#5AA454', '#A10A28']
    };

    constructor(
        
    ) { }

    ngOnInit(): void {}

    onSelect(data:any): void {
        console.log('Item clicked', JSON.parse(JSON.stringify(data)));
      }
    
      onActivate(data:any): void {
        console.log('Activate', JSON.parse(JSON.stringify(data)));
      }
    
      onDeactivate(data:any): void {
        console.log('Deactivate', JSON.parse(JSON.stringify(data)));
      }
}

当我检查页面时，我可以看到如下图表元素但我在浏览器上看不到任何东西。我错过了什么吗？

【问题讨论】：

标签： javascript angular typescript ngx-bootstrap ngx-charts

【解决方案1】：

在您的 home.component.ts 中：将视图类型、colorScheme 和 legendPosition 更改为“任意”。这对我有用。

arr = [{
    "name": "Male",
    "value": 199
  },
  {
    "name": "Female",
    "value": 99
  }
]
view: any = [200, 400];

// options
gradient: boolean = true;
showLegend: boolean = true;
showLabels: boolean = true;
isDoughnut: boolean = true;
legendPosition: any = 'below';

colorScheme: any = {
  domain: ['#5AA454', '#A10A28']
};

【讨论】：