从谷歌图表列表中填充JavaScript数组

Question

我试图通过拉取页面上已有的数据来填充Google图表中的数组。这是我想要填充数组：

var data = google.visualization.arrayToDataTable([ 
    ['Month', 'Target', 'Actual'], 
    ['barchartTitle', ($barchartTarget),  ($barchartActual)], 
    ]); 

这里是我的一切目前都（包括数组）：

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script> 
    $(document).ready(function() { 
     $("li.dfwp-item .neo-cqwp-barchart .neo-cqwp-barchartTitle").each(function() { 
      barchartTitle = $(this).html(); 
     }); 
     $("li.dfwp-item .neo-cqwp-barchart .neo-cqwp-barchartTarget").each(function() { 
      barchartTarget = $(this).html(); 
     }); 
     $("li.dfwp-item .neo-cqwp-barchart .neo-cqwp-barchartActual").each(function() { 
      barchartActual = $(this).html(); 
     }); 
    }); 
    google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart); 
function drawChart() { 

    var data = google.visualization.arrayToDataTable([ 
    ['Month', 'Target', 'Actual'], 
    ['barchartTitle', ($barchartTarget),  ($barchartActual)], 
    ]); 

    var options = { 
    title: '', 
colors: ['#515254', '#00B0F0'], 
legend: { position: 'top', alignment: 'center', maxLines: 3 } 

    }; 

    var chart = new google.visualization.ColumnChart(document.getElementById('revenuetarget')); 

    chart.draw(data, options); 

} 
    </script> 
<div id="revenuetarget" style="width: 100%; height: 300px;"></div> 

Answer 1

它看起来像有可能是一对夫妇的问题。

首先，您要设置$(document).ready块中的三个变量，但其余代码会立即运行，而不是等待文档准备就绪。所以至少应该移动填充数组的代码，使其位于$(document).ready块内（或者可以在该代码周围创建另一个块）。

其次，数组中的变量名称看起来不正确。试试这个：

var data = google.visualization.arrayToDataTable([ 
    ['Month', 'Target', 'Actual'], 
    [barchartTitle, barchartTarget, barchartActual], 
]); 

最后，如果你声明三个可变，而无需使用var您可将它们插入到全球范围内，你想要的东西可能不是。当然，如果你做var宣布他们要确保你的水平，这将会使他们的阵列中填充代码可见这样做，也许是这样的：

$(document).ready(function() { 
    var barchartTitle; 
    var barchartTarget; 
    var barchartActual; 

    $("li.dfwp-item .neo-cqwp-barchart .neo-cqwp-barchartTitle").each(function() { 
     barchartTitle = $(this).html(); 
    }); 
    $("li.dfwp-item .neo-cqwp-barchart .neo-cqwp-barchartTarget").each(function() { 
     barchartTarget = $(this).html(); 
    }); 
    $("li.dfwp-item .neo-cqwp-barchart .neo-cqwp-barchartActual").each(function() { 
     barchartActual = $(this).html(); 
    }); 

    var data = google.visualization.arrayToDataTable([ 
     ['Month', 'Target', 'Actual'], 
     [barchartTitle, barchartTarget, barchartActual], 
    ]); 
});