【发布时间】：2016-02-21 04:56:52
【问题描述】：
我正在努力创建一个可以调用 google chart api 并显示 google-chart (https://developers.google.com/chart/interactive/docs/quick_start) 的 angular2 组件。这通常会导致无法解释的错误，或者只是浏览器永远加载。
编辑：下面添加了完整更新的测试文件
另请参阅 plnkr here。
更具体地说，这些是我用来确定问题开始点的测试文件：
index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.46/angular2.dev.js"> </script>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true }
});
System.import('./app.ts');
</script>
</head>
<body>
<my-app>loading...</my-app>
</body>
</html>
然后，app.ts
import {bootstrap, Component} from 'angular2/angular2';
@Component({
selector: 'my-app',
template:`
<h1>Demo component my-app</h1>
<div id="cc" (click)="test($event)">Click me</div>
`
})
class AppComponent {
constructor() {
console.log("Constructor was called");
}
test(event) {
console.log("Event :",event);
console.log("Test :", google);
console.log("Document object by id",document.getElementById("cc"));
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
console.log("Callback is entered ");
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('cc'));
chart.draw(data, options);
}
console.log("Google object : ", google);
console.log("Now, loading visualization api");
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
console.log("Now, setting callback");
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
console.log("Callback was set");
}
}
bootstrap(AppComponent);
这是控制台显示的内容，当我单击时：
Constructor was called
app.ts:18 Event : MouseEvent {isTrusted: true}
app.ts:19 Test : Object {loader: Object}
app.ts:20 Document object by id <div id="cc">Click me</div>
app.ts:53 Google object : Object {loader: Object}
app.ts:54 Now, loading visualization api
app.ts:57 Now, setting callback
app.ts:60 Callback was set
显然，回调从来没有进入？！
谁能帮我解决这个问题？非常感谢！
【问题讨论】：
-
您应该在
index.html中为jsapi 脚本添加一个脚本标签，然后它将在您的组件中的全局范围内，因此您不需要要求或导入它。 -
@rob 感谢您抽出宝贵时间回答！我意识到我的问题不够具体，并对其进行了编辑。我真正想做的是确保在开始移植当前使用 angular1 的现有应用程序之前，我可以获得一个简单的图形，例如来自 google-visualisation 的快速启动图形示例以在 angular2 组件中运行，其中所有我的图表和数据结构基于 google-visualization ...
-
PrimeNG 的图表组件可以提供帮助。 primefaces.org/primeng/#/piechart
标签： javascript typescript google-visualization angular