Ngx-charts에서 피드의 꺾은 선형 차트를 올바르게로드 할 수 없으며 로컬 파일로 작업합니다.

Question

숯을 초기화했습니다. 잘 작동하므로 구성이 제대로 설정되고 종속성이 설치됩니다. 선 차트의 예를 따라 여기 제공된 데이터를 사용했습니다. https://swimlane.gitbooks.io/ngx-charts/content/charts/line-chart.html

올바르게 작동합니다. 내가 API 피드에서 데이터를로드 할 때 문제는, 내 그래프는 이상한 역할을 툴팁은 사라지고되지 않고, 어떤 경로 난 뭔가가 고장 일명, 같은 창에서로드를 클릭 :

지금이 피드 데이터입니다 :

{ 
    "currentWeight": 80, 
    "bodyMassIndex": 0, 
    "exercisesProgress": [ 
     { 
      "name": "Bench Press", 
      "series": [ 
       { 
        "name": "10/10/2017", 
        "value": 66 
       }, 
       { 
        "name": "12/10/2017", 
        "value": 78 
       }, 
       { 
        "name": "15/10/2017", 
        "value": 61 
       }, 
       { 
        "name": "18/10/2017", 
        "value": 79 
       }, 
       { 
        "name": "19/10/2017", 
        "value": 74 
       }, 
       { 
        "name": "22/10/2017", 
        "value": 68 
       }, 
       { 
        "name": "23/10/2017", 
        "value": 75 
       }, 
       { 
        "name": "17/11/2017", 
        "value": 76 
       }, 
       { 
        "name": "23/11/2017", 
        "value": 62 
       }, 
       { 
        "name": "23/12/2017", 
        "value": 71 
       }, 
       { 
        "name": "23/01/2018", 
        "value": 68 
       }, 
       { 
        "name": "23/02/2018", 
        "value": 70 
       } 
      ] 
     } 
    ] 
} 

나는 다음 그래프에서이 같은 데이터를 초기화 :

<ngx-charts-line-chart 
     [view]="view" 
     [scheme]="colorScheme" 
     [results]="dashboardModel.exerciseProgress" 
     [gradient]="gradient" 
     [xAxis]="showXAxis" 
     [yAxis]="showYAxis" 
     [legend]="showLegend" 
     [showXAxisLabel]="showXAxisLabel" 
     [showYAxisLabel]="showYAxisLabel" 
     [xAxisLabel]="xAxisLabel" 
     [yAxisLabel]="yAxisLabel" 
     [autoScale]="autoScale" 
     (select)="onSelect($event)"> 
</ngx-charts-line-chart> 

것은 작동하지 않습니다.

export var multi = [ 
    { 
     "name": "Bench Press", 
     "series": [ 
      { 
       "name": "10/10/2017", 
       "value": 66 
      }, 
      { 
       "name": "12/10/2017", 
       "value": 78 
      }, 
      { 
       "name": "15/10/2017", 
       "value": 61 
      }, 
      { 
       "name": "18/10/2017", 
       "value": 79 
      }, 
      { 
       "name": "19/10/2017", 
       "value": 74 
      }, 
      { 
       "name": "22/10/2017", 
       "value": 68 
      }, 
      { 
       "name": "23/10/2017", 
       "value": 75 
      }, 
      { 
       "name": "17/11/2017", 
       "value": 76 
      }, 
      { 
       "name": "23/11/2017", 
       "value": 62 
      }, 
      { 
       "name": "23/12/2017", 
       "value": 71 
      }, 
      { 
       "name": "23/01/2018", 
       "value": 68 
      }, 
      { 
       "name": "23/02/2018", 
       "value": 70 
      } 
     ] 
    } 
]; 

을 한 후 좋아 초기화 : 나는 ts.file에 직접 데이터를 입력 할 때

<ngx-charts-line-chart 
     [view]="view" 
     [scheme]="colorScheme" 
     [results]="multi" 
     [gradient]="gradient" 
     [xAxis]="showXAxis" 
     [yAxis]="showYAxis" 
     [legend]="showLegend" 
     [showXAxisLabel]="showXAxisLabel" 
     [showYAxisLabel]="showYAxisLabel" 
     [xAxisLabel]="xAxisLabel" 
     [yAxisLabel]="yAxisLabel" 
     [autoScale]="autoScale" 
     (select)="onSelect($event)"> 
</ngx-charts-line-chart> 

그런 다음 그것을 작동합니다. 내가 다른 무엇인지 확실하지 않다 : 당신은 비동기은이다 API 호출에서 데이터를로드

Answer 1

반환하고 그래프를 initilize 및 차트 NGX 같은 dosent 무엇을 생각하는 약간의 시간이 소요됩니다.

그래서이 dashboardModel?.exerciseProgress 처럼 뭔가를 확인하거나 심지어 내가 DIV 및 ngif, 감사를 넣어 ngIf = "dashboardModel"