내 Google 차트가 표시되지 않는 이유는 무엇입니까?

나는 Google Charts을 HTML에 동적으로 표시하려고하는데 JavaScript과 Google Chart API을 사용하지만 전혀로드하지 않는 것 같습니다.내 Google 차트가 표시되지 않는 이유는 무엇입니까?

이 페이지는 단순히 내 텍스트 필드 만 표시하고 다른 텍스트는 표시하지 않으며 텍스트 필드 onblur 이벤트도 브라우저에서 알려지지 않습니다. 다음은

내가 뭘 잘못 내가 사용하고있는 코드 ...

<!DOCTYPE html> 
<html> 
    <head> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 
     function test() { 
      alert("TEST OUTPUT"); 
     } 

     var chart_data = google.visualization.arrayToDataTable([ 
      ['Days',   'Sales', 'Cheeky', 'test'], 
      ['19/07/2016', 10,   5,   3], 
      ['20/07/2016', 5,   4,   2], 
      ['21/07/2016', 15,   3,   1], 
      ['22/07/2016', 2,   1,   2] 
     ]); 

     var startdate = "20/07/2016"; 
     var enddate = "21/07/2016"; 
     google.charts.load('current', {'packages':['corechart']}); 
     google.setOnLoadCallback(load_page_data); 


     function load_page_data(){ 
      $.ajax({ 
       url: 'get_data.php', 
       data: {'startdate':startdate,'enddate':enddate}, 
       async: false, 
       success: function(data){ 
        if(data){ 
         chart_data = $.parseJSON(data); 
         drawChart(chart_data, "My Chart", "Data"); 
        } 
       }, 
      }); 
     } 

     function drawChart(chart_data, chart1_main_title, chart1_vaxis_title) { 
      var chart1_data = new google.visualization.DataTable(chart_data); 
      var chart1_options = { 
       title: chart1_main_title, 
       vAxis: {title: chart1_vaxis_title, titleTextStyle: {color: 'red'}, minValue: 0, gridlines: { color: '#AC935D'} } 
       hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, 
       backgroundColor:{fill: 'transparent'}, 
       colors: ['#87734A', 'red', 'black'], 
      }; 

      var chart1_chart = new google.visualization.AreaChart(document.getElementById('chart1_div')); 
      chart1_chart.draw(chart1_data, chart1_options); 
     } 

    </script> 
    </head> 

    <body bgcolor="#E2C17A"> 
    <p>Date1: <input type="text" onchange="test()"></p><br/> 
    <div id="chart1_div" style="width: 900px; height: 500px;"></div><br/> 
    </body> 
</html>

입니까?

출처

2016-07-26 TheAuzzieJesus

정적 데이터 또는 동적 데이터를 표시 하시겠습니까? –

@jnanthak 웹 사이트의 데이터베이스에서 SQL 문을 사용하여 동적 데이터를 표시한다는 아이디어가 있습니다. – TheAuzzieJesus

당신은 또한 chart1_options

에서 vAxis 키 다음에 쉼표를 놓치고, 당신은 당신의 코드에서 어디
만 후 load 콜백

설정하려고

을 발사했습니다 google.visualization를 참조 할 수 있습니다 귀하의 코드는 다음과 같습니다.
길이가 길어져 key: value 쌍이 오타를 식별하는 데 도움이됩니다.

google.charts.load('current', { 
    callback: function() { 
    $.ajax({ 
     url: 'get_data.php', 
     data: { 
     'startdate': startdate, 
     'enddate': enddate 
     }, 
     async: false, 
     success: function(data) { 
     if (data){ 
      drawChart($.parseJSON(data), "My Chart", "Data"); 
     } 
     } 
    }); 

    function drawChart(chart_data, chart1_main_title, chart1_vaxis_title) { 
     var chart1_data = new google.visualization.DataTable(chart_data); 
     var chart1_options = { 
     title: chart1_main_title, 
     vAxis: { 
      title: chart1_vaxis_title, 
      titleTextStyle: {color: 'red'}, 
      minValue: 0, 
      gridlines: { 
      color: '#AC935D' 
      } 
     }, 
     hAxis: { 
      title: 'Year', 
      titleTextStyle: { 
      color: '#333' 
      } 
     }, 
     backgroundColor: { 
      fill: 'transparent' 
     }, 
     colors: ['#87734A', 'red', 'black'] 
     }; 

     var chart1_chart = new google.visualization.AreaChart(document.getElementById('chart1_div')); 
     chart1_chart.draw(chart1_data, chart1_options); 
    } 
    }, 
    packages:['corechart'] 
});

출처

2016-07-26 11:53:53 WhiteHat

내 Google 차트가 표시되지 않는 이유는 무엇입니까?

답변

관련 문제