Как динамически создать элемент Google Chart с Angular 8 и Typescript - PullRequest
Новая
       9

Как динамически создать элемент Google Chart с Angular 8 и Typescript

0 голосов
/ 19 октября 2019

Я немного новичок в Angular (версия 8) и Typescript. У меня есть код, в котором пользователи выбирают тип диаграммы, столбцы и заголовок для создания диаграммы Google после нажатия кнопки.

Я попытался поместить элемент в моем chart.component.html в элемент div с определенным идентификатором, а затем добавить данные диаграммы Google, после того как пользователи предоставили "innerHTML". У меня все данные сохранены в локальных переменных для типа, данных, заголовка и т. Д.

Примечание. Я правильно импортировал GoogleChartComponent из «angular-google-charts», а также ViewChild из «angular-core».

Я нацеливаю элемент #here div внутри моего chart.component.ts: 

@ViewChild('googleChart', {static: false}) 
  googleChart: GoogleChartComponent;

Это в моем chart.component.ts: ... 


@Component({
...
})

export class ChartComponent implements OnInit {
...
createChart(){
this.here.nativeElement.innerHTML = "<google-chart [title]='title' [type]='type' [data]='data' [columnNames]='googleColumnNames' [options]='options' [width]='width' [height]='height'> </google-chart>";
}
...
}

И это в моем chart.component.html: 

<button type="submit" id="chartButton" class="btn" (click)="createChart()">
            Create Chart
</button>

<div #here class="chartCreator"></div>

В инспекторе я вижу, что элемент был добавлен внутри элемента #here div, но ничего не отображается, и егоширина и высота отображаются как 0x0.

1 Ответ

0 голосов
/ 12 ноября 2019

У меня была та же проблема, но после этого образца я перестал биться головой.

Шаги, чтобы следовать:

Сначала, parent_component.ts Я звоню на сервер и получаю данные для построения: 

export class ...{
    //First create an event child's can subscribe to
    updateIfItsYou: Subject<any> = new Subject();

    tellChild(who){
      this.updateIfItsYou.next(who);
    }

    function RequestDataFromServer(){
        //...received_data
        this.tellChild(received_data);
    }
}

сейчас, переходя к дочернему компоненту в файле component.html , просто поместите ваш объект google-chart. 

<google-chart #chart 
    width="500" height="300" 
    [title]="changingChart.title"  
    [type]="changingChart.type" 
    [data]="changingChart.data"
    [columnNames]="changingChart.columnNames"
    [options]="changingChart.options" >
</google-chart>

в файле component.ts : 

public changingChart = {
    title: 'Chart Title',
    type: 'ColumnChart',
    data: [['1',0]], //this is just to avoid an error and allow for post-processing of data
    columnNames: ['Col1', 'Col2']
}

Присвойте дочерний компонент родительскому событию: 

@Input() changing: Subject<any> = new Subject();

и ngAfterViewInit

this.changing.subscribe(v = > {
        //do whatever with v.. has the data received, like:
        this.changingChart.data = v.data
    }

и хорошо идти. Надеюсь, это поможет

...