javascript - 第三次调用后，该函数完美运行 [Google Charts]

Question

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

Cannot read property 'arrayToDataTable' of undefined

drawChart callDraw onclick

我第二次打电话时说:

Uncaught Error: Not an array in this line:

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() 调用，第一个错误就会消失，并且只能运行一次。我需要能够多次调用该函数，因为稍后我会将输入更改为动态的而不是静态的数组数组。有谁知道如何解决这个问题吗？

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 = [];
    }
}