Question

所以这是我在index.html上设置的。 api密钥已在console.developers.google.com生成，我认为它不会导致错误。问题是arrayToDataTable是未定义的，我把它放在我的index.html上只是为了测试这是否可行，但在我的真实应用程序中它被分离为一个组件。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script>
        google.charts.load('current', {
          'packages': ['geochart'],
          'mapsApiKey': 'AIzaSyC1PKyylEm8Xe0l0fnv81tuuUS-eOlrRCQ'
        });

        google.charts.setOnLoadCallback(drawStuff());

        function drawStuff() {
          var MapData = google.visualization.arrayToDataTable([
            ["Code", "Name", "Value"],
            ["PH-14", "Autonomous Region in Muslim Mindanao (ARMM)", 1],
            ["PH-05", "Bicol (Region V)", 2],
            ["PH-02", "Cagayan Valley (Region II)", 3],
            ["PH-40", "Calabarzon (Region IV-A)",4 ],
            ["PH-13", "Caraga (Region XIII)", 5],
            ["PH-03", "Central Luzon (Region III)", 6],
            ["PH-07", "Central Visayas (Region VII)", 7],
            ["PH-15", "Cordillera Administrative Region (CAR)", 8],
            ["PH-11", "Davao (Region XI)", 9],
            ["PH-08", "Eastern Visayas (Region VIII)", 10],
            ["PH-01", "Ilocos (Region I)", 11],
            ["PH-41", "Mimaropa (Region IV-B)", 12],
            ["PH-00", "National Capital Region Pambansang Punong", 13],
            ["PH-10", "Northern Mindanao (Region X)", 14],
            ["PH-12", "Soccsksargen (Region XII)", 15],
            ["PH-06", "Western Visayas (Region VI)", 16],
            ["PH-09", "Zamboanga Peninsula (Region IX)", 17]
          ]);


          console.log(MapData);

          // Set chart options
          var MapOptions = {
            'region': 'PH',
            'resolution': 'provinces',
            '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.GeoChart(document.getElementById('chartdiv'));
          chart.draw(MapData, MapOptions);
        };
    </script>

我真的不知道设置中缺少什么。

Answer 1

首先，删除...中的括号

google.charts.setOnLoadCallback(drawStuff) // not drawStuff()

当你有括号时，你传递调用函数的结果，但API希望给出一个处理函数（而不是它的结果）。

此外，而不是......

["Code", "Name", "Value"],

...尝试使用标签语法，就像这样......

[{label: 'Code', type: 'string'},
{label: 'Name', type: 'string'},
{label: 'Value', type: 'number'}],

API应该能够在没有这种变化的情况下弄清楚它，但这是一个＆＃34;只是在它的需要＆＃34;一种变化也使代码更加自我记录。

Answer 2

您可以在线尝试使用此控制台进行网页html js css：

＆＃13;

google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawStuff);
      function drawStuff() {
        var data = google.visualization.arrayToDataTable([
            ["Code", "Name", "Value"],
            ["PH-14", "Autonomous Region in Muslim Mindanao (ARMM)", 1],
            ["PH-05", "Bicol (Region V)", 2],
            ["PH-02", "Cagayan Valley (Region II)", 3],
            ["PH-40", "Calabarzon (Region IV-A)",4 ],
            ["PH-13", "Caraga (Region XIII)", 5],
            ["PH-03", "Central Luzon (Region III)", 6],
            ["PH-07", "Central Visayas (Region VII)", 7],
            ["PH-15", "Cordillera Administrative Region (CAR)", 8],
            ["PH-11", "Davao (Region XI)", 9],
            ["PH-08", "Eastern Visayas (Region VIII)", 10],
            ["PH-01", "Ilocos (Region I)", 11],
            ["PH-41", "Mimaropa (Region IV-B)", 12],
            ["PH-00", "National Capital Region Pambansang Punong", 13],
            ["PH-10", "Northern Mindanao (Region X)", 14],
            ["PH-12", "Soccsksargen (Region XII)", 15],
            ["PH-06", "Western Visayas (Region VI)", 16],
            ["PH-09", "Zamboanga Peninsula (Region IX)", 17]
          ]);

          // Set chart options
          var options = {
            'region': 'PH',
            'resolution': 'provinces',
            'title': 'How Much Pizza I Ate Last Night',
            'width': 400,
            'height': 300
          };

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

＆＃13;

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

＆＃13;

Answer 3

在我的例子中使用 angular 9，我使用 WS 服务，然后我尝试在 arrayToDataTable 和 ComboChart 或 GeoChart 上发送值，并且有相同的错误。

我修复了调用相同函数的问题，直到所有组件 angular 都准备就绪。在 angular 的资产文件夹上添加谷歌图表，然后我在 index.html 上给你打电话

希望能帮到你。

示例

your_function_name(){
    your_ws_name().subscribe(
        (data) => {

            try {
                //is ok
            }
            catch(e){
                //to make until all elements google char on ready.
                if (e.toString().includes('arrayToDataTable') || 
                        e.toString().includes('ComboChart')) {
                    this.your_function_name();
                }
            }
        }
    );
}

无法在Google Geo Charts中读取未定义的属性“arrayToDataTable”

3 个答案: