使用AJAX更新Google圖表值

Question

我正在嘗試使用AJAX使用數據庫中的數據更新Google圖表。

當我選擇一個選項時，更新應該發生。

但是，它不會更新任何內容...

圖表如下：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([

<?php include("chartdata.php");?>
]);

var options = {
    animation: {duration: 1000, easing: 'out', "startup": true},
    vAxis: {minValue: 0},
    pointSize: 4,
    pointShape: 'circle'
};

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

// FILTER CHART

$("#chart-selector option").click(function() {
    var selectname = $(this).val();
    $.ajax({
        url:"include/chartdata-filter.php",
        method:"POST",
        data:{select_name:selectname},
        dataType:"text",
        success:function(chart)
        {
            alert(chart); // WORKS
            chart.draw(google.visualization.arrayToDataTable([chart]), options); // DOESN'T WORK
        }
    });
});}

這是選擇字段。 因此，當我選擇一個時，應該更新圖表：

<select id="chart-selector" name="select_name" onchange="chartSelect()">
<option>List Item 1</option>
<option>List Item 2</option>
</select>

當我選擇一個選項時，我會在警報中正確獲得輸出。 警報中的輸出看起來像這樣（來自chart.php）：

['Date', 'Column 1', 'Column 2'],
['2016-10-01', 0, 0],
['2016-10-02', 1, 2],
['2016-10-03', 3, 4],
['2016-10-04', 5, 6],
['2016-10-05', 7, 8],
['2016-10-06', 9, 10]

另外，當我手動將此數據粘貼到AJAX成功函數中時，它也可以正常工作：

chart.draw(google.visualization.arrayToDataTable([
    ['Date', 'Column 1', 'Column 2'],
    ['2016-10-01', 0, 0],
    ['2016-10-02', 1, 2],
    ['2016-10-03', 3, 4],
    ['2016-10-04', 5, 6],
    ['2016-10-05', 7, 8],
    ['2016-10-06', 9, 10]]), options); // THIS WORKS

但是顯然，手動粘貼它沒有任何意義，因為我想更新onchange數據。

總結一下：

1. 我有選擇的選項。

2. 當我選擇其中一個選項時，應從數據庫（WORKS）中提取數據。

3. 數據已在警報中正確提取，但未在圖表中更新。 當我手動粘貼代碼時，它可以在onchange上工作。 所以問題可能出在這里：

   chart.draw（google.visualization.arrayToDataTable（[chart]），options）;

有什么建議么？

預先感謝任何有想法的人！

Answer 1

我猜是因為您使用的是dataType: 'text'所以您的chart變量是字符串而不是數組（即"[1, 2, 3]"而不是[1, 2, 3] ）。 它在警報中正確顯示，因為警報正在顯示字符串的內容。 您需要先反序列化數組。 嘗試這個：

var arr = JSON.parse("[" + ajaxResponse.replace(/'/g, '"').replace(/,$/g, '') + "]");
chart.draw(google.visualization.arrayToDataTable(arr), options);

編輯 ：Runcorn的答案包括一個我忘記包括的重要細節。 如果從您的ajax調用返回的文本沒有用\\引起單引號或用雙引號替換，則它將失敗。

編輯2 ：已更新，以包括工作代碼的相關代碼段。 這是一個使它正常工作的小提琴 。

Answer 2

這是因為您google.visualization.arrayToDataTable test（String）傳遞給google.visualization.arrayToDataTable ，而google.visualization.arrayToDataTable則需要數組對象。 您獲得的AJAX響應是純文本，您需要將其轉換為Javascript數組。 請按照以下步驟操作，

var resultantAjaxResponse="['Date', 'Column 1', 'Column 2'],['2016-10-01', 0, 0],['2016-10-02', 1, 2],['2016-10-03', 3, 4],['2016-10-04', 5, 6],['2016-10-05', 7, 8],['2016-10-06', 9, 10]";
//Convert String to JSON Parse-able form
resultantAjaxResponse = resultantAjaxResponse.replace(/'/g, '"');
//Convert to Javascript array
var arr = JSON.parse("[" + resultantAjaxResponse + "]");

您現在可以將arr用作

chart.draw(google.visualization.arrayToDataTable([arr]), options); 

請注意，我尚未測試此代碼，但這可以解決您遇到的問題。 另外，我建議您在AJAX Response中返回JSON而不是文本，這樣將結果映射到數組將更加方便和簡單。