無法讀取Google Geo Charts中未定義的屬性'arrayToDataTable'

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應該能夠在不進行此更改的情況下解決問題，但這是“按需提供”的更改，它也使代碼更具自說明性。

Answer 2

嗨，嘗試使用此控制台在線獲取Web html js css：

 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); } 

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