從谷歌圖表列表中填充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], 
    ]); 
});