因為發現有統計數據整理和顯示圖表的需求
於是去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的顏色都無法改動了…
解決了
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個讚
挖屋，這也太帥了吧，功能也好齊全
天啊，又要陷入選擇障礙了 XDD