时间戳

首页 > 解决方案 > 如何使用 json 和烧瓶将字符串数据从 pandas 数据帧传递到 google.visualization.DataTable

javascript - 如何使用 json 和烧瓶将字符串数据从 pandas 数据帧传递到 google.visualization.DataTable

问题描述

我正在尝试使用谷歌词树构建一个 wordtree 数据可视化网站元素，并且flask.

我采取的方法是基于这个答案，包括尝试实现此处推荐的格式，并且我也尝试过遵循本教程，但我word_trees.html只是一直呈现空白页。

除了从更大的数据加载，虽然.csv在实际应用程序中是等效的，相关部分app.py是：

from flask import Flask, render_template
import pandas as pd
import gviz_api

#create to data
lst = ["You've stolen a 'PIZZA' my heart! @CfgLaw Than",
       "Did your workplace buy you pizza for #national",
       "So last week on #NationalPizzaDay I had plans|",
       "Last week it was #NewStartersDay and #National",
       "@JurysInnsHotels #NationalPizzaDay Wow! I’m dr"]
df = pd.DataFrame({'text':lst})

#initiate app
app = Flask(__name__)

#create gvis formatted data
def get_data():
  # Creating the data
  description = {"text": ("string", "Text")}
  data = [{"text":"{}".format(text)} for text in df.text]
  # Loading it into gviz_api.DataTable
  data_table = gviz_api.DataTable(description)
  data_table.LoadData(data)
  # Creating a JSon string
  json_string = data_table.ToJSon()
  return json_string

#pass data to template 
@app.route("/")
def word_trees():
    data = get_data()
    return render_template('word_trees.html',tweets=data)

if __name__ == "__main__":
    app.run(debug=True)

并且word_trees.html是：

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

      function drawChart() {
          var data = new google.visualization.DataTable(tweets);
        );

        var options = {
          wordtree: {
            format: 'implicit',
            word: 'pizza',
            type: 'double'
          }
        };

        var chart = new google.visualization.WordTree(document.getElementById('wordtree_basic'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="wordtree_basic" style="width: 900px; height: 500px;"></div>
    </body>
</html>

我希望该应用程序能够根据 中的数据呈现一个 wordtree df.text，但它会一直呈现一个空白页面。

标签： javascriptpythonhtmlflaskgoogle-visualization

解决方案

推荐阅读