Question

我正在使用Google Charts和TS在一些图表中工作。我收到的错误就像标题中的错误一样。图表有时可以正常工作，有时即使浏览器控制台中出现错误也能正常工作......有时根本不起作用。这是我的一些代码。

/// <reference path="Scripts/typings/google.visualization/google.visualization.d.ts" />

Class Init{

CreateChart(): void{

            //call charts methods
            this.DrawActiveUsers();
            this.DrawExpensiveChart();
            this.DrawRequestsChart();
}

private DrawActiveUsers(): void{
 
        let data = new google.visualization.DataTable();
        ...
        ...
                let chart = new google.visualization.BarChart(document.getElementById('topUsersChart'));
        chart.draw(data, options);
}
  
  
  private DrawExpensiveChart(): void {...}
  
  
  private DrawRequestsChart(): void {...}

  
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.min.css"/>
    <script src="app.js"></script>
    <base href="https://polygit.org/components/">
    <script src="webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="polymer/polymer.html">
    <link rel="import" href="google-chart/google-chart.html">
    <link rel="import" href="paper-progress/paper-progress.html">
    <link rel="import" href="paper-card/paper-card.html">

    <script type="text/javascript">
        let init = new Init();
        google.charts.load('current', { 'packages': ['corechart', 'bar'], "callback": init.CreateChart() });
        //google.charts.setOnLoadCallback(init.CreateChart());
    </script>
</head>
<body onload="init.CreateChart()">
<div id="root">
    <paper-progress id="busy"></paper-progress>
    <paper-card id="top">
        <google-chart id="comboChart"></google-chart>
    </paper-card>
    <div id="bottom">
        <paper-card id="left">
            <google-chart id="expensiveChart"></google-chart>
            <div>
                <ul id="legend" class="content">
                    <li>
                        <p><span class="po"></span>Persistent Object (ms)
                        </p></li>
                    <li>
                        <p><span class="query"></span>Query (ms)
                        </p>
                    </li>
                </ul>
            </div>
        </paper-card>
        <paper-card id="right">
            <google-chart id="topUsersChart">
            </google-chart>
        </paper-card>
    </div>
</div>
</body>
</html>

关于如何解决这个问题的任何想法？

Answer 1

在尝试使用

之前，需要确保已加载谷歌图表

第一次，'callback'声明中未正确定义load

'callback'需要对函数的引用 - ＆gt; init.CreateChart

不是函数的结果 - ＆gt; init.CreateChart()

因此，load声明应为......

google.charts.load('current', {
  'packages': ['corechart', 'bar'],
  'callback': init.CreateChart
});`

下一步，body标记上也存在相同的功能

这会导致问题，body在google.load之前完成

还可以依赖Google 'callback'来了解网页何时准备就绪

所以不需要<body>上的内联事件，将其删除

在谷歌图表上获取“未捕获的TypeError：google.visualization.DataTable不是构造函数”

1 个答案: