在Angular 12中導入圖表,碰到的問題 (ngx-charts)

因為發現有統計數據整理和顯示圖表的需求

於是去FB的Angular 社團找到了圖表架構的統計
目前是先試用看看

@swimlane/ngx-charts

(https://www.npmjs.com/package/@swimlane/ngx-charts)

這套

(如果有其他感覺美美的圖表框架也可以分享一下 感謝)


然後使用這個範例來試著仿造開發

但是出現以下錯誤訊息

 error TS2322: Type '{ domain: string[]; }' is not assignable to type 'string | Color'.
  Type '{ domain: string[]; }' is missing the following properties from type 'Color': name, selectable, group      

5       [scheme]="colorScheme"
         ~~~~~~

 error TS2322: Type 'string' is not assignable to type 'LegendPosition'.

9       [legendPosition]="legendPosition"
         ~~~~~~~~~~~~~~

查了試過把
[legendPosition]=“legendPosition” 改成 legendPosition=“legendPosition”
但是仍然一樣

有熟悉這套的人知道上面這些錯誤訊息該怎樣改嗎?

感謝

.ts

 single: any[] | undefined;
  view: [number, number] = [700, 400];

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

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

  constructor() {
    Object.assign(this, single);
  }

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

.html

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

打開你貼的 stackbliz 的範例,是可以正常執行的,是有修改到什麼東西後壞掉嗎?

只有版本差異,範例是Angular 7,目前開發環境Angular 12

後來改寫成這樣才沒跳錯,

public legendPosition: LegendPosition = LegendPosition.Below;

public colorScheme: { domain: string[] } = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
  };
<ngx-charts-pie-chart
      [view]="view"
      scheme="colorScheme"
      [results]="single"
      [gradient]="gradient"
      [legend]="showLegend"
      [legendPosition]="legendPosition"
      [labels]="showLabels"
      [doughnut]="isDoughnut"
      (select)="onSelect($event)"
      (activate)="onActivate($event)"
      (deactivate)="onDeactivate($event)"
    >
</ngx-charts-pie-chart>

這下子Complied成功
但是瀏覽器跳錯,圖還是沒出來 XD

RROR TypeError: Cannot read property 'domain' of undefined
    at new ColorHelper (swimlane-ngx-charts.js:6368)
    at PieChartComponent.setColors (swimlane-ngx-charts.js:16535)
    at PieChartComponent.update (swimlane-ngx-charts.js:16525)
    at PieChartComponent.ngOnChanges (swimlane-ngx-charts.js:2564)
    at PieChartComponent.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1498)
    at callHook (core.js:2536)
    at callHooks (core.js:2495)
    at executeInitAndCheckHooks (core.js:2446)
    at refreshView (core.js:9479)
    at refreshComponent (core.js:10635)

發現了…


中的屬性
scheme=“colorScheme”
這個拿掉瀏覽器就不會跳錯了

但是相對的,charts的顏色都無法改動了…

:joy:

解決了

colorScheme的格式要按照interface和enum慢慢賦值…

 public colorScheme: string | Color = {
    name: '',
    selectable: true,
    group: ScaleType.Ordinal,
    domain: ['#5AA454', '#E44D25', '#CFC0BB', '#7aa3e5'],
  };

完整.ts

import { Component, OnInit } from '@angular/core';
import { Color, LegendPosition, ScaleType } from '@swimlane/ngx-charts';
import { single } from './data';

@Component({
  selector: 'app-show-charts-page',
  templateUrl: './show-charts-page.component.html',
  styleUrls: ['./show-charts-page.component.scss'],
})
export class ShowChartsPageComponent implements OnInit {
  single: any[] | undefined;
  view: [number, number] = [700, 400];

  // options
  gradient: boolean = true;
  showLegend: boolean = true;
  showLabels: boolean = true;
  isDoughnut: boolean = false;
  public legendPosition: LegendPosition = LegendPosition.Below;

  public colorScheme: string | Color = {
    name: '',
    selectable: true,
    group: ScaleType.Ordinal,
    domain: ['#5AA454', '#E44D25', '#CFC0BB', '#7aa3e5'],
  };

  constructor() {
    Object.assign(this, { single });
  }

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

.html

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

推 : ngx-echarts (xieziyu.github.io)

還有很多範例可參考: Examples - Apache ECharts

2個讚

挖屋,這也太帥了吧,功能也好齊全
天啊,又要陷入選擇障礙了 XDD