Google可视化图表ajax数据

Question

我正在尝试在烧瓶中使用AJAX调用动态地呈现一个google可视化图表，以设置数据。用户输入输入，然后单击一个链接，该链接调用ajax函数来获取数据。"/ajax_test“视图将返回一个json对象，但问题是我不知道如何将数据正确地传递回DataTable函数。如何将从ajax获得的json数据传递给绘图图函数的变量？

图表功能：

<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

此方法不知道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);
}

Answer 2

我使用下面的代码做了类似的事情，这是一个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>