Question

嗨我有2个谷歌图表（1个日历和另一个LineChart）即时获取Uncaught TypeError: string is not a function和Uncaught TypeError: undefined is not a function。昨天它工作正常，我可以看到这两个，但今天我得到这个错误，我只能显示其中一个字符或日历。在分离的文件中，我没有得到任何错误，我修改了json，它显示了我想要检索的数据。

<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':["corechart"]});

google.load("visualization", "1.1", {packages:["calendar"]});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawCalendar);


function drawCalendar() {

$.ajax({
    url: 'getCalendario.php',
    dataType: 'json',
    success: function (jsonData) {
   var options = {
     title: "Calendario",
     height: 200,

    daysOfWeek: 'LMMJVSD'
   };


    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(jsonData);
      var chart = new google.visualization.Calendar(document.getElementById('calendar'));



        // Instantiate and draw our chart, passing in some options.

        chart.draw(data, options);
    }
});
$.ajax({
    url: 'getChart.php',
    dataType: 'json',
    success: function (jsonData) {
        // Create our data table out of JSON data loaded from server.
    var options = {
        title: 'Estado de Bateria',
        width: 800,
        height: 400,
        vAxis: {
        minValue: 0, 
        maxValue: 100,

        }

    };
                var data = new google.visualization.DataTable(jsonData);

                // Instantiate and draw our chart, passing in some options.
         var chartBat = new google.visualization.LineChart(document.getElementById('battery'));


                chartBat.draw(data, options);
            }
        });
}
</script>
</head>

<body>
<!--Div that will hold the pie chart-->
<div id="calendar" ></div>
<div id="battery"></div>
</body>
</html>

控制台图片

Answer 1

此代码正在工作并绘制两个图表，问题是您忘记加载线图依赖。

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':["corechart"]});

google.load("visualization", "1.1", {packages:["calendar"]});
google.load("visualization", "1.1", {packages:["linechart"]});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawCalendar);


function drawCalendar() {

var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
      data.addColumn('number', 'X');
      data.addRows([
        [new Date(2008, 0, 1), 1],
        [new Date(2008, 1, 14), 2],
        [new Date(2008, 9, 14), 12],
        [new Date(2008, 10, 14), 22],
        [new Date(2009, 1, 1), 30]
      ]);
    // Create our data table out of JSON data loaded from server.
      var chart = new google.visualization.Calendar(document.getElementById('calendar'));



        // Instantiate and draw our chart, passing in some options.

        chart.draw(data, options);

var data2 = new google.visualization.DataTable();
        data2.addColumn('date', 'Date');
      data2.addColumn('number', 'X');

      data2.addRows([
        [new Date(2008, 0, 1), 1],
        [new Date(2008, 1, 14), 2],
        [new Date(2008, 9, 14), 12],
        [new Date(2008, 10, 14), 22],
        [new Date(2009, 1, 1), 30]
      ]);
    var options = {
        title: 'Estado de Bateria',
        width: 800,
        height: 400,
        vAxis: {
        minValue: 0, 
        maxValue: 100
        }

    };

                // Instantiate and draw our chart, passing in some options.
         var chartBat = new google.visualization.LineChart(document.getElementById('battery'));


                chartBat.draw(data2, options);
}

未捕获的TypeError：字符串不是一个函数 - 在谷歌图表上

1 个答案: