Google时间线图表错误
Google时间线图表错误
提问于 2018-05-10 21:05:11
我使用angular 4和谷歌时间线图表，它给出了一个错误，如'ERROR TypeError: Cannot read property ' timeline‘of undefined' and my code like
index.html
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>dasbordComponets.ts
declare var google: any;
public initGraph() {
google.charts.load('current', {'packages': ['timeline']});
google.charts.setOnLoadCallback(this.testGraph());
}
public testGraph () {
var container = document.getElementById('graph');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}dasbordComponets.html
<div id="graph" style="height: 180px;"></div>回答 1
Stack Overflow用户
发布于 2018-06-02 06:02:13
我现在正在使用谷歌时间线Angular尝试使用这个存储库npm i ng2-google-charts，你只需要安装它，并遵循以下代码：
HTML
<h1>Timeline chart</h1>
<google-chart [data]="timelineChartData"></google-chart>Component.ts
public timelineChartData:any = {
chartType: 'Timeline',
dataTable: [
['Name', 'From', 'To'],
[ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]
]
}Module.ts
...
@NgModule({
imports: [
...
Ng2GoogleChartsModule,
...
],
...这是一个工作的StackBlitz Demo。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50273622
复制相关文章
相似问题