Question

我试图在我简单的Flask网络应用中使用谷歌图表制作一个简单的折线图（第一次）。我无法让图表显示出来。这是我的模板文件中的代码：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
        function drawChart() {

                      var data = google.visualization.DataTable();
                          data.addColumn('date','date-time');
                          data.addColumn('number', 'chiller_load');
                          data.addRows({{ data | safe }});

                      var options = {
                        title: 'Exchange rate overview',
                        chartArea: {width: '50%'},
                        legend: { position: 'bottom' }
                      };

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

                      chart.draw(data, options);
         }

</script>

现在我非常确定数据是作为列表列表发送到模板b / c我可以通过放置{{data |安全}}在我的模板中。我还通过在jupiter中运行后端函数并获得预期的列表列表来确认。如果有帮助，这里有“获取和发送数据的功能”：

def fetch_column(col_name):
    db = get_db()
    column = []
    q_result = db.query('select time_stamp, '+col_name+' from op_data;')
    for measurement in q_result:
        column.append([ measurement['time_stamp'] , measurement[col_name] ])
    return column

使用带有Flask的谷歌图表

0 个答案: