Ngx-chartsはフィードから折れ線グラフを正しく読み込むことができません。ローカルファイルで動作します。

Question

私はcharを初期化しています。正しく動作し、設定が適切にセットアップされ、依存関係がインストールされている。私は折れ線グラフの例を参照し、ここで提供されるデータを使用しました。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> 

シングは動作しません。 私が直接ts.fileにデータを入れた場合：

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

、その後のようにそれを初期化：

<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> 

そして、それが動作します。 私が異なっているのかわからないです：あなたはasyncのあるAPI呼び出しからデータをロードする

Answer 1

は戻って、グラフをinitilizeとチャートNGXのようにdosent何だと思うためにいくつかの時間がかかります。

ですから、私はdiv要素とngifを置くこの dashboardModel?.exerciseProgress あるいはngIf = "dashboardModel"