如何使用Web API在角度8中创建动态图表

Question

我正在使用画布创建条形图。我创建了一个静态图表，但是我需要一个动态图表。我需要使用Web API从后端获取数据。

需要任何答案和建议。

Answer 1

用于折线图和饼图

<canvas baseChart [datasets]="lineChartData"
    [labels]="lineChartLabels" [options]="lineChartOptions"
    [colors]="lineChartColors" [legend]="lineChartLegend"
    [chartType]="lineChartType" [plugins]="lineChartPlugins">
</canvas>

<canvas baseChart [data]="pieChartData" [labels]="pieChartLabels"
        [chartType]="pieChartType" [options]="pieChartOptions"
        [plugins]="pieChartPlugins" [legend]="pieChartLegend"
        (chartClick)="chartClicked($event)">
</canvas>

。ts文件

 ///line chart
    public lineChartData: ChartDataSets[] = []
    public lineChartLabels: Label[];
    public lineChartOptions: ( ChartOptions ) = { responsive: true, };
    public lineChartColors: Color[] = [
        {
            borderColor: 'black',
            backgroundColor: 'rgba(255,0,0,0.3)',
        },
    ];
    public lineChartLegend = true;
    public lineChartType = 'line';
    public lineChartPlugins = [];
    ///pie chart
    public pieChartOptions: ChartOptions = {
        responsive: true,
    };
    public pieChartLabels: Label[]// = [['Download Sales'], ['In Store Sales'], 'Mail Sales'];
    public pieChartData: SingleDataSet// = [300, 500, 100];
    public pieChartType: ChartType = 'pie';
    public pieChartLegend = false;
    public pieChartPlugins = [];
    chartJson = {}

在ngoninit中，您可以致电

 this.http.get( 'getGraphJSON' ).subscribe(( data ) => {
        this.chartflag = true
        this.lineChartData.push( data["linechartData"] );
        this.lineChartLabels = data["lineChartLabels"];
        this.pieChartLabels = data["pieChartLabels"];
        this.pieChartData = data["pieChartData"];

    } ) 

JSON：

{"pieChartLabels":["Nursing ","333999-Machinery Manufacturing","-Nursing Facilities","Social ","Electronic Product ","srvices","Social ","Professional, Scientific, and Technical Services","Repair and Maintenance","Transportation Equipment Manufacturing","Professional, Scientific, and Technical Services","Computer and Electronic Product Manufacturing","Crop Production","Publishing Industries (except Internet)","Machinery Manufacturing","Construction of Buildings"],"pieChartData":[83,57,42,41,37,33,33,33,12,12,9,9,4,3,3,3],"lineChartLabels":["Jun","Oct","Nov","Dec"],"linechartData":{"data":[1,2,5,423],"label":"Opportunity"}}