2

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

工作正常。问题是当我从 API 提要加载数据时，我的图表表现得很奇怪，工具提示并没有消失，无论我点击什么路线，它都会在同一个窗口中加载，也就是有些东西坏了： https://user-images.githubusercontent.com/3589518/31313300-bd04ad70-abd6-11e7-9e71-3d7744d689f4.PNG

现在这是来自提要的数据：

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

然后它工作。我不确定有什么不同： 在此处输入图像描述

4

1 回答 1

3

您正在从异步的 api 调用加载数据，这需要一些时间来返回和初始化图表，并认为 ngx 图表喜欢什么。

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

于 2017-10-08T10:00:51.620 回答