将数组传递给 Flask 应用程序中的 google 图表数据集

Question

我有 Flask 应用

@app.route('/dash_data')
def dash_data():
    ***
        return jsonify({'key' : dashDetails})

哪个return不错json字符串

{"key":[["Food",50],["Health",10],["Restaurants",2],["Sports",20],["Taxi",5]]}

我的 google 图表脚本需要

 [
     ['Food',     50],
     ['Health',    10],
     ['Restaurants', 2],
     ['Sports',    20],
     ['Taxi',  5]
 ]

它通过以下方式将此数据传递到图表：

var testData = $.get('/dash_data');
  var tm = test_data.done(function (resp){ return resp;})
  var dataArray = tm.responseJSON.key

  var data = google.visualization.arrayToDataTable(dataArray);

然而，控制台输出是

Uncaught (in promise) TypeError: Cannot read property 'key' of undefined at drawChart

我的错误在哪里？完整的 google-图表 js 文件：

google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var test_data = $.get('/dash_data');
  var tm = test_data.done(function (resp){return resp;})
  var t = tm.responseJSON.key

  var data = google.visualization.arrayToDataTable(t);
 
  var options = {
    title: 'Expences 12.2020',
    pieHole: 0.4,
    width: 380,
    height: 200
  };

  var chart = new google.visualization.PieChart(document.getElementById('exp_month_chart'));
  chart.draw(data, options);
}

谢谢。

Answer 1

$.get 异步运行，
所以你需要在尝试绘制图表之前等待 done 回调...

google.charts.load("current", {
  packages: ["corechart"]
}).then(function () {
  $.get('/dash_data').done(function (resp) {
    var data = google.visualization.arrayToDataTable(resp.key);

    var options = {
      title: 'Expences 12.2020',
      pieHole: 0.4,
      width: 380,
      height: 200
    };

    var chart = new google.visualization.PieChart(document.getElementById('exp_month_chart'));
    chart.draw(data, options);
  });
});

在上面的post中，

var t = tm.responseJSON.key

在

之前运行

var tm = test_data.done(function (resp){return resp;})

完成了...

将数组传递给 Flask 应用程序中的 google 图表数据集

Pass the array to the google chart dataset in flask application

javascript

arrays

jquery

charts

google-visualization