使用 ng2-charts 创建一个图表并给它一个可观察的标签

Question

目前我正在弄清楚如何在使用 ng2-charts 时推送标签。

但以下仅导致在 Y 轴下显示标签。但我想要每个数据点的标签。

数据是字符串格式（最好是日期，但这在某种程度上不起作用）因为我想显示日期和数据。

  data: Data[]
  constructor(
  private route: ActivatedRoute,
  private coolService: CoolService,
  private location: Location,
  ) { }
  lineChartData: ChartDataSets[] = [];
  lineChartLabels: Label[] = [];
lineChartOptions = {
  responsive: true,
};
lineChartColors: Color[] = [
  { borderColor: 'black', backgroundColor: 'rgba(255,255,0,0.28)' },
];
lineChartLegend = true;
lineChartPlugins = [];
lineChartType = 'line';

  getData(): void{
  const id = +this.route.snapshot.paramMap.get('id');
    this.coolService.getData(id).subscribe(
    response => {
      this.data = response;
      this.lineChartData.push({
        data: response.map(item => item.cool_speed),
        label: 'Some name for the line lol'
        });
        this.lineChartLabels.push({label: response.map(item => item.date)});
    },
    error => { }
  );
  }

How it looks at the moment

也许有人有一些使用这个作为我的新手的经验。

干杯！

Answer 1

第一种可能的解决方案：

我认为这里的这一行是你的问题。

this.lineChartLabels.push({label: response.map(item => item.date)});

您正在为多个数据点推送一个对象标签，而不是多个字符串标签。 lineChartData[0].data 中的每个点都应该有一个标签。这就是为什么它只是映射第一个点并且你有一条直线。 lineChartLabels的长度应该对应lineChartData[0].data的长度，等。要修复它，请尝试：

this.lineChartLabels.push(response.map(item => item.date));

第二种可能的解决方案

这是 stackblitz 上的解决方案。

  public lineChartData: ChartDataSets[] = [
    { data: [], label: 'Series A' },
  ];

  public lineChartLabels: Label[] = [];

  
  constructor(private coolService: CoolService) { }

  ngOnInit() {
    this.coolService.getData().subscribe({
      next: coolItems => {
        coolItems.forEach(ci => {
          this.lineChartData[0].data.push(ci.coolData);
          this.lineChartLabels.push(ci.date);
        });
      }
    });
  }

Answer 2

如果我做对了，你想要一个按日期显示一个值 cool_data 的图表，就像我在下面的示例中看到的那样：

[{"id": 1, "cool_data": 12.32,"date": Thu 01 Jan 2004 00:00:00 GMT},{the same again},{...}]

所以你不必使用标签。

您可以使用 Time Cartesian Axis.

数据结构如下：

data: [{
     t: new Date(),
     y: 1
}, {
    t: new Date(),
    y: 10
}]

因此，您只需映射自己的数据：date 到 t（简单 ^^）和 cool_data 到 y（也很简单）。

类似下面的东西（不要copy/paste，我没有测试那个代码）：

getData(): void{
    const id = +this.route.snapshot.paramMap.get('id');
        this.coolService.getData(id).subscribe(
        response => {
            this.data = response;
            this.lineChartData.push({
                data: response.map(item => {y: item.cool_speed, t: item.date}),
                label: 'Some name for the line lol'
                ...

也许你必须做一个 new Date(item.date) 或使用 momentjs。

使用 ng2-charts 创建一个图表并给它一个可观察的标签

creating a chart using ng2-charts and giving it the labels from a observable

ng2-charts

angular

第一种可能的解决方案：

第二种可能的解决方案