Question

我创建了一个Google图表，第一次调用该函数时出现此错误：

无法读取未定义
的属性'arrayToDataTable'
drawChart callDraw onclick

我第二次打电话给我说：

未捕获错误：不是数组在这一行：

var data = google.visualization.arrayToDataTable(inputData);

目：

var array1 = [[80,100,120,130,140,120,105,60],[70,90,100,115,130,120,102,65]];
var array2 = [[12,14,16,17,18,17,16,9],[10,13,14,17,17,16,14,11]];
var size = 8;
var size2 = 2;


function callDraw(array1,array2,size,size2){
    google.charts.load('current', {'packages':['corechart'], callback: drawChart});
    var i=0,j=0;
    var both ={};

    for(i= 0; i < size2 ; i++)
      for(j=0; j < size; j++)
        both[array1[i][j]] = array2[i][j];

    var count=0;
    for(var key in both)
      count ++;

    var inputData = [];
    for(i=0;i<count+1;i++)
      inputData[i]=[]; 
    inputData[0][0] = "Number of staff";
    inputData[0][1] = "Number of traffic";

    var counter=1;
    for(var key in both){
        inputData[counter][0] = key;
        inputData[counter][1] = both[key];
        counter++
        console.log(key + " " + both[key]);
    }  
    drawChart();

  function drawChart() {

    console.log("I am here");
    var data = google.visualization.arrayToDataTable(inputData);

    var options = {
      title: 'Company Performance',
      hAxis: {title: 'No. of traffic',  titleTextStyle: {color: '#333'}},
      vAxis: {title: 'No. of staff' ,minValue: 0}
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    inputData = [];
  }
}
 </script>

体：

<div id="chart_div" style="width: 100%; height: 500px;"></div>
<p id="test"></p>
<button onclick="callDraw(array1,array2,size,size2)">Click me</button>

如果我从callDraw中删除了draChart（）调用，则第一个错误消失，它只能运行一次。我需要能够多次调用该函数，因为稍后我将更改输入不是一个静态的数组数组，而是一些dinamic。有谁知道如何解决这个问题？

Answer 1

好的，正如我在评论中提到的，问题是您必须等到加载谷歌可视化后再绘制图表。所以你必须使用google.charts.setOnLoadCallback()回调。

此外，当您拥有数组时，可以使用类似array1.length的内容来获取数组长度。所以你不需要为变量设置固定值作为数组长度。

因此，所有这些更改后，您的代码将如下所示：

<强> HTML

<div id="chart_div" style="width: 100%; height: 500px;"></div>
<p id="test"></p>
<button onclick="javascript:callDraw(array1,array2,size,size2);">Click me</button>

JavaScript

var array1 = [[80,100,120,130,140,120,105,60],[70,90,100,115,130,120,102,65]];
var array2 = [[12,14,16,17,18,17,16,9],[10,13,14,17,17,16,14,11]];
var size = array1[0].length;
var size2 = array1.length;

function callDraw(array1,array2,size,size2){
    google.charts.load('current', {'packages':['corechart']});
    var i=0,j=0;
    var both ={};

    for(i= 0; i < size2 ; i++)
        for(j=0; j < size; j++)
            both[array1[i][j]] = array2[i][j];

    var count=0;
    for(var key in both)
        count ++;

    var inputData = [];
    for(i=0;i<count+1;i++)
        inputData[i]=[]; 

    inputData[0][0] = "Number of staff";
    inputData[0][1] = "Number of traffic";

    var counter=1;
    for(var key in both){
        inputData[counter][0] = key;
        inputData[counter][1] = both[key];
        counter++
        console.log(key + " " + both[key]);
    }  
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        console.log("I am here");
        var data = google.visualization.arrayToDataTable(inputData);

        var options = {
            title: 'Company Performance',
            hAxis: {title: 'No. of traffic',  titleTextStyle: {color: '#333'}},
            vAxis: {title: 'No. of staff' ,minValue: 0}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
        inputData = [];
    }
}

第3次通话后，该功能完美运行[Google Charts]

1 个答案: