Google可視化圖表ajax數據

Question

我正在嘗試通過燒瓶中的AJAX調用來動態呈現Google可視化圖表以設置數據。 用戶輸入輸入，然后單擊一個調用ajax函數的鏈接以獲取數據。 “ / ajax_test”視圖將返回一個json對象，但是我遇到的問題是我不知道如何正確地將數據傳遞回DataTable函數。 我如何將從ajax獲取的json數據傳遞給drawchart函數的變量？

圖表功能：

<script type="text/javascript">
function drawChart(){
     var data = new google.visualization.DataTable(jsondata);
      var options = {
             explorer: {},
          }; //end options

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

Ajax功能：

<script type=text/javascript>
$(function() {
$('a#DrawChart').bind('click', function() {
  $.getJSON($SCRIPT_ROOT + '/ajax_test',
   {//input data sent to view}
  , function(data) {
    var jsondata = data.test_json;
    drawChart();

  });
  return false;
   });
  });
</script>

Answer 1

我已經使用以下代碼完成了類似的操作，這是一個jinja2的示例，因此您可以調整代碼（更改jsonData var的初始化方式）：

<script type="text/javascript">
        //load the Google Visualization API and the chart
    google.load('visualization', '1', {'packages': ['corechart']});

    google.setOnLoadCallback (createChart);

    var jsonData = {{ value_columns | tojson | safe }}

    function createChart() {
        var dataTable = new google.visualization.DataTable(jsonData);
        var chart = new google.visualization.LineChart(document.getElementById('chart'));
        //define options for visualization
        var options = {is3D: 'no', title: 'Some Title' };

        attachRedrawForTab(chart, dataTable, options);
        attachRedrawForAccord(chart, dataTable, options);
        //draw our chart
        chart.draw(dataTable, options);
    }

</script>

Answer 2

此方法不知道jsondata來源：

function drawChart() {
    var data = new google.visualization.DataTable(jsondata);
    ...
}

添加jsondata作為參數：

function drawChart(jsondata) {
    var data = new google.visualization.DataTable(jsondata);
    ...
}

然后在您的Ajax調用jsondata傳遞給方法：

function(data) {
    var jsondata = data.test_json;
    drawChart(jsondata);
}