使用HttpClient将google datatable提取到Angular组件中失败

Question

我正在尝试在我的Angular网络应用中使用Google图表，并且在从控制器获取数据时遇到问题。考虑对Google图表组件进行以下尝试。当我使用注释掉的google.visualization数据表代码时，该组件正常工作。我设置了一个控制器，以从服务器返回类似数据。我在代码后显示了返回数据的示例。当我尝试使用获取的数据时，图表组件失败，它什么也没有产生。我的调试尝试表明，我对HttpClient的理解很差。考虑一下ngOnInit顶部的两个http.get语句；第一个显示响应对象的控制台输出，该输出看起来非常像我期望的那样，它是根据控制器返回的json创建的对象。第二个http.get导致this.chartData未定义，这似乎是问题的核心。有任何提示吗？

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

declare var google: any;

// Reference:
//  https://stackoverflow.com/questions/37542408/angular2-google-charts-how-to-integrate-google-charts-in-angular2

@Component({
selector: 'google-chart',
templateUrl: './google-chart.component.html',
styleUrls: ['./google-chart.component.css']
})
export class GoogleChartComponent implements OnInit {
    private chartData: any;

constructor(
    private http: HttpClient) {
}

ngOnInit() {

    this.http.get('api/BinomialResult/GetGoogleChartData')
        .subscribe(response => console.log("response:",response));

    this.http.get('api/BinomialResult/GetGoogleChartData')
        .subscribe(response => this.chartData = response);

    // Load the Visualization API and the chart package.
    google.charts.load('current', { 'packages': ['corechart'] });

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);

    // Callback that creates and populates a data table, 
    // instantiates the chart, passes in the data and
    // draws it.
    function drawChart(this: any) {

        // (1) Create the data table from an array.

        //var dataTable = google.visualization.arrayToDataTable([
        //  ['X', 'Prior', 'Posterior'],
        //  [0.0, 5.000, 0.000],
        //  [0.1, 1.061, 0.026],
        //  [0.2, 0.795, 0.347],
        //  [0.3, 0.694, 1.180],
        //  [0.4, 0.649, 2.152],
        //  [0.5, 0.636, 2.586],
        //  [0.6, 0.649, 2.152],
        //  [0.7, 0.694, 1.180],
        //  [0.8, 0.795, 0.347],
        //  [0.9, 1.061, 0.026],
        //  [1.0, 5.000, 0.000]
        //]);

        // (2) Create the data table explicitly

        //var dataTable = new google.visualization.DataTable();
        //var newData = [
        //  ['X', 'Prior', 'Posterior'],
        //  [   0.0,  10.07,  4.169E-11 ],
        //  [   0.1,  1.061,  0.026 ],
        //  [   0.2,  0.795,  0.347 ],
        //  [   0.3,  0.694,  1.180 ],
        //  [   0.4,  0.649,  2.152 ],
        //  [   0.5,  0.636,  2.586 ],
        //  [   0.6,  0.649,  2.152 ],
        //  [   0.7,  0.694,  1.180 ],
        //  [   0.8,  0.795,  0.347 ],
        //  [   0.9,  1.061,  0.026 ],
        //  [   1.0,  10.07,  4.169E-11 ]
        //];

        //// determine the number of rows and columns.
        //var numRows = newData.length;
        //var numCols = newData[0].length;

        //// addd the columns
        //for (var i = 0; i < numCols; i++)
        //  dataTable.addColumn('number', newData[0][i]);

        //// add the rows.
        //for (var i = 1; i < numRows; i++)
        //  dataTable.addRow(newData[i]);           

        // (3) Create the data table from json

        var dataTable = new google.visualization.arrayToDataTable(this.chartData);

        // Set chart options

        var options = {
            title: 'Google Line Chart Example',
            width: 600,
            height: 370,
            chartArea: { left: 40, top: 30},
            curveType: 'none',
            hAxis: {
                title: 'P\n\n\n\n',  // https://www.webtoolhub.com/tn561380-xhtml-characters-list.aspx?type=script&category=greek-coptic
                textStyle: { 
                    //color: '#01579b',
                    //fontSize: 20,
                    fontName: 'Arial',
                    bold: false,
                    italic: false
                },
                titleTextStyle: {
                    //color: '#01579b',
                    //fontSize: 16,
                    fontName: 'Arial',
                    bold: false,
                    italic: false
                }
            },
            vAxis: {
                title: 'Likelihood',
                textStyle: {
                    //color: '#1a237e',
                    //fontSize: 24,
                    bold: false,
                    italic: false
                },
                titleTextStyle: {
                    //color: '#1a237e',
                    //fontSize: 24,
                    bold: false,
                    italic: false
                }
            },
        };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.LineChart(document.getElementById('chartDiv'));

        chart.draw(dataTable, options);
    }
  }
}

这是控制器返回的json数据：

{
  "cols": [
    {"type": "number" ,"id": "X" ,"label": "X" }, 
    {"type": "number" ,"id": "Prior" ,"label": "Prior" }, 
    {"type": "number" ,"id": "Posterior" ,"label": "Posterior" }
    ],
  "rows" : [
    {"c" : [{"v": 0}, {"v": 10.0708791199471}, {"v": 4.16959810659944E-11}]}, 
    {"c" : [{"v": 0.1}, {"v": 1.06103295394597}, {"v": 0.0260699856599757}]}, 
    {"c" : [{"v": 0.2}, {"v": 0.795774715459477}, {"v": 0.347207759022947}]}, 
    {"c" : [{"v": 0.3}, {"v": 0.694609118042857}, {"v": 1.18041936646279}]}, 
    {"c" : [{"v": 0.4}, {"v": 0.649747334361397}, {"v": 2.15278216848928}]}, 
    {"c" : [{"v": 0.5}, {"v": 0.636619772367581}, {"v": 2.58689939247778}]}, 
    {"c" : [{"v": 0.6}, {"v": 0.649747334361397}, {"v": 2.15278216848928}]}, 
    {"c" : [{"v": 0.7}, {"v": 0.694609118042856}, {"v": 1.18041936646279}]}, 
    {"c" : [{"v": 0.8}, {"v": 0.795774715459477}, {"v": 0.347207759022947}]}, 
    {"c" : [{"v": 0.9}, {"v": 1.06103295394597}, {"v": 0.0260699856599757}]}, 
    {"c" : [{"v": 1}, {"v": 10.0708791199471}, {"v": 4.16959810659946E-11}]}
    ]
}

我已应用换行符并进行了缩进，以使返回的数据更易于阅读。返回的json数据是使用Google.DataTable.Net.Wrapper for C＃生成的，可以作为Nuget包使用。

Answer 1

图表代码可能已在将数据分配给this.chartData之前运行。

您可能应该在subsribe函数中包括图表代码。

尝试以下结构...

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

declare var google: any;

// Reference:
//  https://stackoverflow.com/questions/37542408/angular2-google-charts-how-to-integrate-google-charts-in-angular2

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

export class GoogleChartComponent implements OnInit {
  private chartData: any;

  constructor(
    private http: HttpClient) {
  }

  ngOnInit() {
    this.http.get('api/BinomialResult/GetGoogleChartData').subscribe(function (response) {
      google.charts.load('current', {
        packages: ['corechart']
      }).then(function () {
          var dataTable = new google.visualization.DataTable(response);

          var options = {
              title: 'Google Line Chart Example',
              width: 600,
              height: 370,
              chartArea: { left: 40, top: 30},
              curveType: 'none',
              hAxis: {
                  title: 'P\n\n\n\n',
                  textStyle: {
                      fontName: 'Arial',
                      bold: false,
                      italic: false
                  },
                  titleTextStyle: {
                      fontName: 'Arial',
                      bold: false,
                      italic: false
                  }
              },
              vAxis: {
                  title: 'Likelihood',
                  textStyle: {
                      bold: false,
                      italic: false
                  },
                  titleTextStyle: {
                      bold: false,
                      italic: false
                  }
              },
          };

          var chart = new google.visualization.LineChart(document.getElementById('chartDiv'));
          chart.draw(dataTable, options);
      });
    });
  }
}

注意：您使用的json将直接创建数据表，不需要辅助方法arrayToDataTable

var dataTable = new google.visualization.DataTable(response);

Answer 2

[WhiteHat发现了问题。是的我想出了类似的东西。诀窍不仅是在订阅回调中分配数据，而且还不要在数据可用之前不给Google图表提供drawChart函数，否则将冒着令人恐惧的无列错误消息的风险。与WhiteHat差不多。

这是我确定的代码：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

declare var google: any;

@Component({
selector: 'google-chart',
templateUrl: './google-chart.component.html',
styleUrls: ['./google-chart.component.css']
})
export class GoogleChartComponent implements OnInit {

public chartData: any;
public dataTable: any;

constructor(
    private http: HttpClient) {
}

ngOnInit() {

    google.charts.load('current', { 'packages': ['corechart'] });

    this.http.get('api/BinomialResult/GetGoogleChartData')
        .subscribe((response: any) => {
            this.chartData = response;
            this.dataTable = new google.visualization.DataTable(this.chartData);
            google.charts.setOnLoadCallback(this.drawChart.bind(this));
        });
}
private drawChart(this: any) {

    // Set chart options
    var options = {
        title: 'Google Line Chart Example',
        width: 600,
        height: 370
    };

    var chart = new google.visualization.LineChart(document.getElementById('chartDiv'));

    chart.draw(this.dataTable, options);
  }

}