오류 유형 오류: ctx.list가 정의되지 않음

안녕;
지속되는 문제가 있으며 이해할 수 없습니다.
항상 다음 오류가 발생합니다. 오류 유형 오류: ctx.list가 정의되지 않았습니다.

차트 모델.ts

내보내기 클래스 ListCandidats {
데이터 레이블: 문자열[]
레이블: 문자열[]
데이터세트1: 숫자[]
데이터세트2: 숫자[]

constructor(
    dataLabels: string[] = ['A','AAA'],
    labels: string[] = Array.from({length:30}).map(x=>''),
    dataSet1: number[] = Array.from({length:30}).map(x=>0),
    dataSet2: number[] = Array.from({length:30}).map(x=>0)
) {
    this.dataLabels = dataLabels;
    this.labels = labels;
    this.dataSet1 = dataSet1;
    this.dataSet2 = dataSet2;
}

}

차트.서비스.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
'@angular/core'에서 { 주입 가능 } 가져오기;
import {Observable } from 'rxjs';
'src/environments/environment'에서 { 환경 } 가져오기;
import { ListCandidats } from '../models/chart-model';

const API_URL = ${environment.apiUrl}
@주사용({
제공: '루트'
})
내보내기 클래스 ChartsService {

건설자(
비공개 http : HttpClient
) { }

개인 authLocalStorageToken = ${environment.appVersion}-${environment.USERDATA_KEY} lsValue: 문자열 = localStorage.getItem(this.authLocalStorageToken) || ""
authData = JSON.parse(this.lsValue)
httpHeaders = 새 HttpHeaders({
승인: Bearer ${this.authData.accessToken} ,
})

getListCandidats(): 관찰 가능 {
this.http.get( ${API_URL}/admin/dashboard/listCandidats , {헤더: this.httpHeaders})를 반환합니다.
}

}

chart.component.ts

import { Component, OnInit } from '@angular/core';
import { getCSSVariableValue } from 'src/app/_metronic/kt/_utils';
import { ChartsService } from '../services/charts.service';
import { ListCandidats } from '../models/chart-model';

@요소({
선택기: '앱 차트 비문',
templateUrl: './chart-inscription.component.html',
styleUrls: ['./chart-inscription.component.scss']
})
내보내기 클래스 ChartInscriptionComponent는 OnInit {를 구현합니다.

목록: ListCandidats

차트 옵션: 모두 = {}

건설자(
공공 서비스: ChartsService
) {

}

ngOnInit() {

this.services.getListCandidats().subscribe(data => 
  {
    this.list= data
    this.chartOptions = this.getChartOptions(350,  this.list)
  })

}

getChartOptions(높이: 숫자, 목록: ListCandidats) {

const labelColor = getCSSVariableValue('--bs-gray-500')
const borderColor = getCSSVariableValue('--bs-gray-200')
const baseColor = getCSSVariableValue('--bs-primary')
const secondaryColor = getCSSVariableValue('--bs-gray-300')

반품 {
시리즈: [
{
이름: list.dataLabels[0],
데이터: list.dataSet1
},
{
이름: list.dataLabels[1],
데이터: list.dataSet2,
},
],
차트: {
fontFamily: '상속',
유형: '바',
높이: 높이,
툴바: {
쇼: 거짓,
},
},
플롯 옵션: {
술집: {
가로: 거짓,
columnWidth: '50%',
borderRadius: 0,
},
},
전설: {
쇼: 거짓,
},
데이터 라벨: {
활성화: 거짓,
},
뇌졸중: {
쇼: 참,
너비: 2,
색상: ['투명'],
},
x축: {
카테고리: list.labels,
축 테두리: {
쇼: 거짓,
},
축 틱: {
쇼: 거짓,
},
라벨: {
스타일: {
색상: labelColor,
글꼴 크기: '12px',
},
},
},
y축: {
라벨: {
스타일: {
색상: labelColor,
글꼴 크기: '12px',
},
},
},
채우다: {
불투명도: 1,
},
상태: {
정상: {
필터: {
유형: '없음',
값: 0,
},
},
호버: {
필터: {
유형: '없음',
값: 0,
},
},
활동적인: {
allowMultipleDataPointsSelection: 거짓,
필터: {
유형: '없음',
값: 0,
},
},
},
툴팁: {
스타일: {
글꼴 크기: '12px',
},
y: {
포맷터: 함수(값: 숫자) {
'$' + 값 + '천' 반환
},
},
},
색상: [baseColor, secondaryColor],
그리드: {
borderColor: 테두리 색상,
strokeDashArray: 4,
y축: {
라인: {
쇼: 참,
},
},
},
}

}

}