NGX-Chart - 从服务获取图表数据时出现问题

Question

我正在尝试从服务获取 NGX-Chart 坐标。

它通过使用包含数据的静态对象来工作，但是，如果我尝试调用 PHP 服务动态加载数据，图表不会加载。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
 selector: 'app-graph',
 templateUrl: './graph.component.html',
 styleUrls: ['./graph.component.scss']
})

export class GraphComponent {
    constructor(private http: HttpClient) {}

    //WORKS :)  
    //public multi = [{"name":"Miky","series":[ {"name":"08:47","value":"1.67"}, //{"name":"08:48","value":"1.63"}, {"name":"08:49","value":"1.60"} ] }, //{"name":"Freddy","series":[ {"name":"08:51","value":"1.64"}, //{"name":"08:53","value":"1.57"}, {"name":"08:58","value":"1.57"} ] }];

    //DOESN'T WORK :(
    public multi = this.getGraphData();

    view: any[] = [1280, 400];
    showXAxis = true;
    showYAxis = true;
    gradient = false;
    showLegend = true;
    showXAxisLabel = false;
    xAxisLabel = '';
    showYAxisLabel = false;
    yAxisLabel = '';
    timeline = true;
    colorScheme = {
        domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
    };
    autoScale = true;

    getGraphData() {
        this.http.post('service.php',{}).subscribe(result => {
        console.log(result);
        return result;
        });
    }
}

PHP 服务文件 'service.php'

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
echo '[
    {"name":"Miky","series":[
        {"name":"08:47","value":"1.67"},
        {"name":"08:48","value":"1.63"},
        {"name":"08:49","value":"1.60"}
        ]
    },

    {"name":"Freddy","series":[
        {"name":"08:51","value":"1.64"},
        {"name":"08:53","value":"1.57"},
        {"name":"08:58","value":"1.57"}
        ]
    }
]';

我是不是漏了什么？？？？？

Answer 1

您应该将 getGraphData 方法更改为类似这样的方法。

getGraphData() {
  this.http.post('service.php', {}).subscribe(result => {
    this.multi = result;
  });
}

NGX-Chart - 从服务获取图表数据时出现问题

NGX-Chart - Problem while getting chart data from service

php

angular

typescript

ngx-charts