2

我想ngx-charts用于我的项目。问题是我不明白如何使用从我的 api 获得的数据初始化我的图表。

垂直条形图看起来很简单。数据类型如下：

https://stackblitz.com/edit/vertical-bar-chart?embed=1&file=app/app.component.ts

constructor Object.assign(this, data)当我在（data我从我的 api 获得）中分配时，我收到以下错误：

错误类型错误：无法读取未定义的属性“toLocaleString”

他们的数据是以下类型：

export var single = [{
    "name": "Germany",
    "value": 8940000
  },
  {
    "name": "USA",
    "value": 5000000
  },
  {
    "name": "France",
    "value": 7200000
  }
];

我的数据是：

[{
    "data": "2019-01-09",
    "totalConsum24": 66.66666666666667
  },
  {
    "data": "2019-02-03",
    "totalConsum24": 160
  },
  {
    "data": "2019-02-04",
    "totalConsum24": 153.84615384615384
  },
  {
    "data": "2019-02-05",
    "totalConsum24": 90.9090909090909
  }
]

Edit1：这就是我从后端获取数据的方式。数据和我上面贴的一样。在构造函数中，我从 Object.assign(this, {single}) 开始，最初是 single: any[];

ngOnInit() {
this.shipService.getConsumuriSiDataForShipById(this.shipId).subscribe(data 
=> {
  console.log(data);
  this.single = data;
});
4

1 回答 1

2

在您的组件中，您必须将map 数据转换为 ngx-charts 可以理解的格式。在这里，试一试：

...
import { ShipService } from './path-to-ship-service';

@Component({...})
export class AppComponent {

  ...,
  single = [];

  constructor(private shipService: ShipService) {}

  ngOnInit() {
    this.shipService.getConsumuriSiDataForShipById(this.shipId)
      .subscribe(data => {
        console.log(data);
        this.single = data.map(datum => ({ name: datum.data, value: datum.totalConsum24 }));
    });
  }

  ...
}

这是您参考的工作示例 StackBlitz。

于 2019-02-09T11:52:59.713 回答