Как создать диаграммы Dynami c с веб-API в angular 8 - PullRequest
Новая
       3

Как создать диаграммы Dynami c с веб-API в angular 8

0 голосов
/ 08 января 2020

Я использую холст для создания гистограмм. Я создал диаграмму stati c, но мне нужен динамический c график. Мне нужно получить данные из серверной части с помощью веб-API.

1 Ответ

1 голос
/ 08 января 2020

это для линейного графика и p ie графика 

<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"}}
...