Графика не отображается автоматически по умолчанию - PullRequest
Новая
       10

Графика не отображается автоматически по умолчанию

0 голосов
/ 26 апреля 2019

У меня проблема, и у меня есть некоторые графики, которые загружаются с данными, которые поступают через HTTP, у них есть Select Input, чтобы выбрать тип графики.Проблема в том, что при загрузке представления графики не показывают ничего, кроме того, что когда я изменяю значение в «Выбрать», если они показывают значения, когда я выполняю отладку и я создаю файл Console.log в OnInit, данные, используемые в графикеотображаются правильно. Я знаю, что архитектура немного тяжелая и что у нее нет хороших практик, я пытаюсь оптимизировать ее, но у меня есть эта проблема.

И попытался в компоненте использовать ngOnChanges так, чтобыкогда он обнаруживает изменения в наборе данных, он обновляет информацию, но она не была достигнута.

Я оставляю фрагменты кода различных разделов, чтобы посмотреть, что они могут мне посоветовать.

Служба:

    public getDebtDynamicsResults(data: DebtDynamicsInput) {
        var url = `${ApiEndpoints.modelApiUrl}/${ApiEndpoints.asd_dynamicdebt}`;

        return this.commonHttpPost(url, data, null);
    }

    private commonHttpPost(url: string, data: any, headers: HttpHeaders) {
        return this.http.post(url, data, { headers: headers });
    }

Компонент и представление, где вызывается график: 

//Definitions

    @ViewChild('balanceGraph') balanceGraph: ChartComponent;
    @ViewChild('debtDataGraph') debtDataGraph: ChartComponent;
    chartType: string = this.chartTypes[1];
    chartLegends: true;
    chartLabels = [];
    currentChartLabels: Array<any>;

    balanceData: Array<any>;
    currentBalanceData = [];

    debtData: Array<any>;
    currentDebtData = [];


//OnInit

   ngOnInit(): void {
        this.getInitialData();
    }


//Methods

    getInitialData() {
        this.apiService.get(ApiEndpoints.asd_debtdynamicsdata, null).then(
            result => {
                    this.initialData = result.data;
                    for (var i = result.data.Tini; i <= result.data.Tproy; i ++)
                        this.years.push(i);
                    this.filterTables();
                    this.getdebtDynamicsResult(result.data, {});
            },
            error => {
                this.noData = true;
                if(error.result === 'MissingData')
                {
                    this.noResultMessage = error.message.split(',').map(s => s.trim());
                    console.log(this.noResultMessage);
                }
                else {

                    this.gErrorMessage = true;
               }
                this.isLoading = false;
                this.bigLoader = false;
                console.error(error);
        });
    }


    private getdebtDynamicsResult(data: any, shocks: any) {
        this.sofisApiService.getDebtDynamicsResults(this.getDebtDynamicsInputData(data, shocks)).subscribe((result) => {
            this.simulationResults = result;

            this.bigLoader = false;
            this.isLoading = false;
            this.chartsReady = true;
            this.dataReady = true;

            this.buildCharts(this.simulationResults);
            this.chartType = this.chartTypes[0];
            this.currentChartColors = this.lineChartColors
            if (this.balanceGraph)
                this.balanceGraph.reloadChart();
            if (this.debtDataGraph)
                this.debtDataGraph.reloadChart();
        });
    }

    private buildChartSerie(label, data) {
        var series: any = {};
        series.data = data;
        series.label = label;

        return series;
    }

    private buildCharts(simulationResults) {
        this.chartLabels = this.years;

        this.currentBalanceData = [];
        this.currentDebtData = [];

        this.currentBalanceData.push(this.buildChartSerie("base scenary", simulationResults.all_shocks.base_balance_primario_ingreso_total));
        this.currentDebtData.push(this.buildChartSerie("base scenary", simulationResults.all_shocks.base_deuda_total_ingreso_total));
//etc etc etc, all data

    }

ШАБЛОН: 


<div *ngIf="charts">
                <div class="content-box no-bg">
                    <div class="selections">
                        <span class="title-blue-16">Selección de Shocks:</span>
                        <div class="dropdown">
                            <select class="form-control" [(ngModel)]="chartType" (change)="changeChartType()">
                                <option *ngFor="let type of chartTypes" value="{{type}}">{{type}}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="graph-boxes" *ngIf="chartsReady">
                    <div id="balance-container" class="half-box">
                        <div>
                            <ul class="chart-options">
                                <li class="download" (click)="exportChart('balance')">Descargar</li>
                                <li class="delete" (click)="deleteChart('balance-container')">Eliminar</li>
                                <li class="drag"></li>
                            </ul>
                            <div id="balance">
                                <h2>Balance Primario / Ingreso Disponible (%)</h2>
                                <!--<ul class="chart-ref">
                                    <li class="color1">Escenario base</li>
                                    <li class="color2">Tipo de Cambio</li>
                                    <li class="color3">Ingreso Total</li>
                                    <li class="color4">T. de interés - Deuda en moneda extranjera</li>
                                    <li class="color5">T. de interés - Deuda en moneda local</li>
                                    <li class="color6">Todos los Shocks</li>
                                </ul>-->
                                <app-chart #balanceGraph class="chart" [datasets]="currentBalanceData"
                                    [labels]="chartLabels" [options]="chartOptions" [colors]="currentChartColors"
                                    [legend]="chartLegends" [chartType]="chartType"></app-chart>
                            </div>
                        </div>
                    </div>

                    <div id="debt-container" class="half-box">
                        <div>
                            <ul class="chart-options">
                                <li class="download" (click)="exportChart('deuda')">Descargar</li>
                                <li class="delete" (click)="deleteChart('debt-container')">Eliminar</li>
                                <li class="drag"></li>
                            </ul>
                            <div id="deuda">
                                <h2>Deuda / Ingreso Disponible (%)</h2>
                                <!--<ul class="chart-ref">
                                    <li class="color1">Escenario base</li>
                                    <li class="color2">Tipo de Cambio</li>
                                    <li class="color3">Ingreso Total</li>
                                    <li class="color4">T. de interés - Deuda en moneda extranjera</li>
                                    <li class="color5">T. de interés - Deuda en moneda local</li>
                                    <li class="color6">Todos los Shocks</li>
                                </ul>-->
                                <app-chart #debtDataGraph class="chart" [datasets]="currentDebtData"
                                    [labels]="chartLabels" [options]="chartOptions" [colors]="currentChartColors"
                                    [legend]="chartLegends" [chartType]="chartType"></app-chart>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Компонент 

import { Component, Input, ViewChild } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts';

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

export class ChartComponent {
    @Input() datasets;
    @Input() labels;
    @Input() options;
    @Input() colors;
    @Input() legend;
    @Input() chartType;

    @ViewChild('baseChart') chart: BaseChartDirective;

    public reloadChart() {
        if (this.chart !== undefined) {
            this.chart.chart.destroy();
            this.chart.chart = 0;

            this.chart.datasets = this.datasets;
            this.chart.labels = this.labels;
            this.chart.options = this.options;
            this.chart.colors = this.colors;
            this.chart.legend = this.legend;
            this.chart.chartType = this.chartType;
            this.chart.ngOnInit();
        }
    }
}

ШАБЛОН: 

<div style="display: block;">
    <canvas baseChart #baseChart="base-chart" width="400" height="250" [datasets]="datasets" [labels]="labels" [options]="options" [colors]="colors" [legend]="legend" [chartType]="chartType"></canvas>
</div>

Это сводный код того, что включает в себя эта графика.

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

...