Динамически заполнить график ng2 в Angular 4 - PullRequest
Новая
       44

Динамически заполнить график ng2 в Angular 4

0 голосов
/ 19 февраля 2019

Я написал пример приложения для извлечения данных из сервиса в формате json и привязки их к диаграмме в интерфейсе пользователя.

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

Функциональность следующая: Страница 1: содержит 2 раскрывающихся списка.1 с типом диаграммы и 2 с типом образца.При выборе обоих раскрывающихся значений я нажимаю кнопку, которая вызывает функцию fetchData () в GlobalService.

Ниже приведен метод getter и setter в GlobalService 

 getChartData() {
  return this.chartData;
 }

 setChartData(response: any) {
   this.chartData = response.data;
   // console.log(this.chartData);
 }

 getChartlabel() {
  return this.chartLabel;
 }

 setChartLabel(response: any) {
   this.chartLabel = response.label.label;
   // console.log(this.chartLabel);
 }

 getResponse() {
   return this.response;
 }
 setResponse(response: any) {
   this.response = response;
   // console.log(response);
 }

, и функция выглядит следующим образом 

 fetchData(chart: any, sample: any) {
  console.log();
  const request = {
    chartType: this.selectedChart, // 'BAR | LINE'
    sampleType: this.selectedSample // 'COUNT'
  };

  this.http.post('http://localhost:22222/school/getData', request, this.options)
    .subscribe(
      res => {
        res = res.json();
        const responseData = res;
        console.log(responseData);
        if (responseData.hasOwnProperty('data')) {
          console.log('Data Fetched');
          this.setResponse(responseData); // Setting response
          this.setChartData(responseData); // setting data
          this.setChartLabel(responseData); // setting label
          this.router.navigate(['/gotoChartPage']); // navigating to next page chart.html
        } else {
          alert('Data Fetch Failed');
        }
      });
 }

Теперь мой chart.html выглядит так, как указано в здесь 

<div id='barDiv' class="onerow" *ngIf="1">
        <h4 class="m-2">Bar Chart</h4>
    <div style="display: block">
        <canvas baseChart width="800" height="500"
                [datasets]="barChartData" // --> This is where i want to update Data
                [labels]="barChartLabels" // --> This is where i want to update Labels
                [options]="barChartOptions"
                [legend]="barChartLegend"
                [chartType]="barChartType">
          </canvas>
      </div>

Тогда мой Chart.component выглядит следующим образом 

  /*******************BAR CHART*********************************/
  public barChartOptions: any = {
     scaleShowVerticalLines: false,
    responsive: true
  };

 public barChartLabels: Array<any> = []; // ["STD 1", "STD 2", "STD 3", "STD 4", "STD 5", "STD 6", "STD 7", "STD 8", "STD 9", "STD 10"]; Sample Data
 public barChartType  = 'bar';
 public barChartLegend  = true;
 public barChartData: any[]  = []; // [ {'data': [40, 32, 42, 23, 43, 35, 50, 48, 37, 45], label: 'COUNT'}]; -- Sample Data

 constructor(private global: GlobalService) {
  this.barChartData =  this.global.chartData;
  this.barChartLabels =  this.global.chartLabel;
}

Мой ответ от json представлен в следующем формате:

Для отдельных наборов данных: 

{
 "data":
    {"data": [40,32,42,23,43,35,50,48,37,45], "label":"COUNT"},
 "label":
    {"label":["STD 1","STD 2","STD 3","STD 4","STD 5","STD 6","STD 7","STD 8","STD 9","STD 10"]}
}

и

Для нескольких наборов данных: 

{
 "data":
    {"data": [40,32,42,23,43,35,50,48,37,45], "label":"MVM"},
    {"data": [04,03,02,03,03,05,50,80,07,45], "label":"HVD"},
    {"data": [20,32,42,23,43,60,50,48,70,40], "label":"BMS"},
 "label":
    {"label":["STD 1","STD 2","STD 3","STD 4","STD 5","STD 6","STD 7","STD 8","STD 9","STD 10"]}
}

Когда я пытаюсь назначить таким способом, график не появляется.Но если я жестко закодирую значения в barChartLabels & barChartData, которые будут отображаться на диаграммах.

Я также попытался таким образом 

`<canvas baseChart width="800" height="500"
   [datasets]="global.chartData" // --> This is where I need to update Data
   [labels]="global.chartLabel" // --> This is where I need to update Labels
   [options]="barChartOptions"
   [legend]="barChartLegend"
   [chartType]="barChartType">
 </canvas>`

Помощь приветствуется.Я застрял с этим из-за того, что мой мозг не может придумать.

Я наткнулся на этот пример в стеке: CLICK & CLICK Но это не правильный путьделать.

Мне интересно, почему данные не привязываются к таким диаграммам напрямую 

   [datasets]="global.chartData" // --> This is where I need to update Data
   [labels]="global.chartLabel"

1 Ответ

0 голосов
/ 04 марта 2019

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

Вы можете использовать наблюдаемый поток вВаш глобальный сервис для уведомления клиентов об изменении данных.

...