Ngx图表无法从Feed中正确加载折线图，只能与本地文件一起使用

问题描述

我正在初始化一个字符.效果很好，因此可以正确设置配置并安装依赖项.我遵循了折线图的示例，并使用了此处提供的数据: https ://swimlane.gitbooks.io/ngx-charts/content/charts/line-chart.html

I am having a char initialised. Works good so configuration is properly set up and dependency installed. I followed example for line-chart and used data provided here: https://swimlane.gitbooks.io/ngx-charts/content/charts/line-chart.html

正常工作.问题是，当我从API提要中加载数据时，我的图形行为奇怪，工具提示没有消失，并且我单击它的任何路径都在同一窗口中加载，又发生了问题:

Works correctly.Problem is when I load a data from API feed, my graph acts strange, tooltip is not disappearing and whatever route i click it loads in same window, aka something is broken:

现在这是提要中的数据:

Now this is the data from feed:

{
    "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
                }
            ]
        }
    ]
}

然后我在图形中初始化这样的数据:

I then initialise data like this in graph:

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

Thing doesn't work.When I put data directly into 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>

然后它起作用.我不确定有什么不同:

Then it works.I am not sure what is different:

推荐答案

您正在从api调用加载数据，该调用是异步的，需要花费一些时间来返回并初始化图形，并认为ngx图表的内容是什么样的.

You are loading data from api call which is async is takes some time to return and initilize the the graph and think that what ngx chart dosent like.

所以您需要检查类似这样的内容 dashboardModel?.exerciseProgress甚至将整个内容放入ngIf = "dashboardModel"

So you need to check something like this dashboardModel?.exerciseProgress or even put the whole thing inside a ngIf = "dashboardModel"

这篇关于Ngx图表无法从Feed中正确加载折线图，只能与本地文件一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！