为什么我的Google图表没有显示?

时间:2016-07-26 05:58:50

标签: javascript html google-visualization

我尝试使用Google ChartsHTMLJavaScript中动态显示某些Google Chart API,但它似乎根本没有加载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> 事件也不会在浏览器中提醒我。

以下是我正在使用的代码......

bluetooth

我做错了什么?

1 个答案:

答案 0 :(得分:1)

vAxis

中的chart1_options键后面缺少逗号

另外,您可以在代码中的任何位置引用google.visualization
但仅在 load回调被解雇后

尝试设置类似的代码,
分解那些长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']
});