Google Chartが表示されないのはなぜですか？

Google ChartsをHTMLに動的に表示しようとしていますが、JavaScriptとGoogle Chart APIを使用していますが、全く読み込まれていないようです。Google Chartが表示されないのはなぜですか？

ページにはテキストフィールドだけが表示され、その他のテキストフィールドは表示されず、テキストフィールド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アイデアは、Webサイト上のデータベースから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 Chartが表示されないのはなぜですか？

答えて

関連する問題