如何在 Angular 8 中使用 web api 创建动态图表答案

【问题标题】：How to create Dynamic Charts with web api in angular 8如何在 Angular 8 中使用 web api 创建动态图表
【发布时间】：2020-01-09 00:12:46
【问题描述】：

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

【问题讨论】：

这里我们喜欢看代码。你能提供一个最小的运行样本吗？也请花点时间在这里阅读本指南“如何提出一个好问题”：stackoverflow.com/help/how-to-ask

标签： angular6 angular7 angular8

【解决方案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"}}

【讨论】：