Question

我使用角度4和谷歌时间线图表它给出了一个错误，如'错误类型错误：无法读取未定义'的属性'时间轴'，我的代码就像

的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>

Answer 1

我现在正在使用 Google时间轴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工作。

Google时间轴图表错误

1 个答案: