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);
}