2017-09-05 1 views
1

에서 정의되지 않은 'arrayToDataTable'속성을 읽을 수 없습니다. 따라서 내 index.html에 내 설정입니다. API 키는 console.developers.google.com에서 생성되었으며 오류가 발생했다고 생각하지 않습니다. 이 문제는 arrayToDataTable이 정의되지 않았기 때문에 내 실제 응용 프로그램에서는 구성 요소로 분리되어 있는지 테스트하기 위해 index.html에 올려 놓았습니다.Google 지오 차트

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

난 정말이 설정에서 누락 건지 모르겠어요.

+0

try console.log (google.visualization.arrayToDataTable); 기능입니까? – InferOn

+0

@InferOn 정의되지 않았습니다. 하지만 내가 console.log (google)를 시도 할 때 모든 것이 존재한다. 기묘한. 하지만 console.log (google.visualization)를 시도 할 때. 그것은 정의되지 않았다. –

+0

공식 jsfiddle을 수정했으며 https://jsfiddle.net/6fru9eo6/1/ – InferOn

답변

2

첫째,에 ...

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

괄호를 제거 , 당신은 함수를 호출 한 결과를 전달하고 있지만 API는 그 결과가 아닌 핸들러 함수를 제공 받기를 원합니다. 대신 ... 또한

,

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

...과 같이, 레이블 구문을 사용하려고 ...

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

이 API이없이 그것을 알아낼 수 있어야 변화를 일으키지 만, 이것은 코드를 좀 더 자체적으로 문서화하게 해주는 "필요한 경우"의 변화입니다.

+0

이 작동하지 않는 것 같습니다. 고마워. G. –

0

안녕 웹 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>