使用 HttpClient 将 google 数据表提取到 Angular 组件失败
Fetching google datatable into Angular component using HttpClient fails
我正在尝试在我的 Angular 网络应用程序中使用 google 图表，但在从控制器获取数据时遇到问题。考虑以下对 google 图表组件的尝试。当我使用注释掉的 google.visualization 数据 table 代码时，该组件工作。我有一个控制器设置为 return 来自服务器的类似数据。我在代码后显示的 returned 数据示例。当我尝试使用获取的数据时，图表组件失败，它什么也没产生。我的调试尝试表明我对 HttpClient 的理解很差。考虑 ngOnInit 顶部的两个 http.get 语句；第一个显示响应对象的控制台输出，看起来非常像我期望的从控制器创建的 json return 对象。第二个 http.get 导致 this.chartData 未定义，目前这似乎是问题的核心。有什么提示吗？
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
declare var google: any;
// Reference:
//
@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);
}
}
}
这是控制器 return 编辑的 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}]}
]
}
我应用了换行符和缩进以使 returned 数据更易于阅读。 json 数据 returned 是使用 Google.DataTable.Net.Wrapper for C# 生成的，可作为 Nuget 包使用。
在数据分配给 this.chartData 之前，图表代码可能是 运行。
您可能应该在 subsribe 函数中包含图表代码。
尝试以下结构...
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
declare var google: any;
// Reference:
//
@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 将直接创建数据 table，
不需要辅助方法 arrayToDataTable
var dataTable = new google.visualization.DataTable(response);
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);
}
}
我正在尝试在我的 Angular 网络应用程序中使用 google 图表，但在从控制器获取数据时遇到问题。考虑以下对 google 图表组件的尝试。当我使用注释掉的 google.visualization 数据 table 代码时，该组件工作。我有一个控制器设置为 return 来自服务器的类似数据。我在代码后显示的 returned 数据示例。当我尝试使用获取的数据时，图表组件失败，它什么也没产生。我的调试尝试表明我对 HttpClient 的理解很差。考虑 ngOnInit 顶部的两个 http.get 语句；第一个显示响应对象的控制台输出，看起来非常像我期望的从控制器创建的 json return 对象。第二个 http.get 导致 this.chartData 未定义，目前这似乎是问题的核心。有什么提示吗？
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
declare var google: any;
// Reference:
//
@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);
}
}
}
这是控制器 return 编辑的 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}]}
]
}
我应用了换行符和缩进以使 returned 数据更易于阅读。 json 数据 returned 是使用 Google.DataTable.Net.Wrapper for C# 生成的，可作为 Nuget 包使用。
在数据分配给 this.chartData 之前，图表代码可能是 运行。
您可能应该在 subsribe 函数中包含图表代码。
尝试以下结构...
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
declare var google: any;
// Reference:
//
@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 将直接创建数据 table，
不需要辅助方法 arrayToDataTable
var dataTable = new google.visualization.DataTable(response);
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);
}
}