将Rest API连接到Google图表

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2013',  1000,      400],
    ['2014',  1170,      460],
    ['2015',  660,       1120],
    ['2016',  1030,      540]
  ]);

  var options = {
    title: 'Company Performance',
    curveType: 'function',
    legend: { position: 'bottom' }
  };

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

  chart.draw(data, options);
}

# 示例Python Flask后端代码
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data', methods=['GET'])
def get_data():
    data = [
        ['Year', 'Sales', 'Expenses'],
        ['2013',  1000,      400],
        ['2014',  1170,      460],
        ['2015',  660,       1120],
        ['2016',  1030,      540]
    ]
    return jsonify(data)

if __name__ == '__main__':
    app.run(port=5000)

function fetchDataAndUpdateChart() {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      var dataTable = google.visualization.arrayToDataTable(data);
      chart.draw(dataTable, options);
    });
}

from flask_cors import CORS

app = Flask(__name__)
CORS(app)