使用 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. 数据在警报中正确提取，但未在图表中更新。当我手动粘贴代码时，它可以在更改中运行。所以问题可能出在此处：

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

有什么建议吗？

提前感谢任何有想法的人！

Answer 1

这是因为您将 test(String) 传递给 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 响应中返回 JSON 而不是文本，以便将结果映射到数组更方便和简单。

Answer 2

我猜这是因为您使用的是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：更新为包含工作代码的相关 sn-p。这是一个fiddle，它工作正常。