Question

我正在初始化一个字符。工作正常，因此正确设置配置并安装依赖项。我按照示例获取了折线图并使用了此处提供的数据：https://swimlane.gitbooks.io/ngx-charts/content/charts/line-chart.html

正常工作。问题是，当我从API提要加载数据时，我的图形行为很奇怪，工具提示没有消失，我点击它的任何路径都加载到同一个窗口，也就是说有些东西被破坏了：

现在这是来自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
                }
            ]
        }
    ]
}

然后我在图表中初始化这样的数据：

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

然后它有效。我不确定有什么不同：

Answer 1

您正在从api调用加载数据，异步需要一段时间才能返回并启动图表，并认为ngx图表非常适合。

所以你需要检查这样的东西 dashboardModel?.exerciseProgress 甚至把整件事放在ngIf = "dashboardModel"

中

Ngx图表无法正确加载来自Feed的折线图，适用于本地文件

1 个答案: