Question

我一直在基于this codelab.的App Engine应用程序的前端工作。我有一个文本框，您可以在其中输入股票代码（例如，AMZN或GOOG），它使用作为在后台运行Google BigQuery查询的标准，然后它会在Google Visualization API line chart中显示几天内的推文计数。

但是，基于我在页面的源代码中看到的内容，它并没有将BigQuery的查询结果提取到数据模板变量{{data}}中。这是我的HTML代码（称为index1.html），它大部分就像是codelab的：

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
  Jibdan Analytics
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">

  countdata = {{ data }}

  function drawVisualization() {
    // Create and populate the data table.
    var data = google.visualization.DataTable(query_response);

    // Create and draw the visualization.
    var chart = new google.visualization.LineChart(document.getElementById('visualization'));
      chart.draw(data, {title: "Tweets by Day by Ticker", 
          curveType: "function",
                    width: 800, height: 600}
            );
  }


  google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 800px; height: 640px;"></div>
</body>
</html>

在查看折线图的Google Code Playground代码后，我弄乱了html和Javascript，但实际上问题似乎是该模板变量。

这也是相关的Python代码。第一种方法应该采用BigQuery响应并将其放入Visualization API应该采用的格式中以生成折线图。 get方法具有要运行的查询字符串，并将结果呈现到模板index1.html中。非常像codelab：

class QueryHandler(webapp2.RequestHandler):

def _bq2line(self, bqdata):
    logging.info(bqdata)
    columnNameDate = bqdata['schema']['fields'][0]['name']
    columnNameVal = bqdata['schema']['fields'][1]['name']
    logging.info("Column Names=%s, %s" % (columnNameDate, columnNameVal))
    countdata = { 'cols': ({'id':columnNameDate, 'label':columnNameDate, 'type':'string'},
      {'id':columnNameVal, 'label':columnNameVal, 'type':'number'})}
    countdata['rows'] = [];
    logging.info(countdata)
    for row in bqdata['rows']:
        newrow = ({'c':[]})
        newrow['c'].append({'v': row['f'][0]['v']})
        newrow['c'].append({'v':row['f'][1]['v']})
        countdata['rows'].append(newrow)
    logging.info('FINAL COUNTDATA---')
    logging.info(countdata)
    self.response.out.write(countdata)
    return json.dumps(countdata)

def get(self):

    QUERY = """
            SELECT STRFTIME_UTC_USEC(querydate, "%Y-%m-%d") AS tweet_date, COUNT(tweet_id) AS tweet_count 
            FROM [jibdantweetstream.tweetdata_09_21_2013]  
            WHERE gcs_load = true AND (REGEXP_MATCH(ticker, '""" + self.request.get('stock') + """')) 
            GROUP BY tweet_date 
            ORDER BY tweet_date
            """                

    try:
        query_request = bigquery_service.jobs()
        query = {'data': self._bq2line(bq.Query(QUERY, BILLING_ID)),
                 'query': QUERY}
        query_response = query_request.query(projectId=BILLING_ID,
                                         body=query).execute()
        template = os.path.join(os.path.dirname(__file__), 'result1.html')
        self.response.out.write(render(template, query_response))

    finally:
        self.response.out.write('<a href="/">Click here</a> to go back to the Search page. ')

所以，这就是我所拥有的。你会看到我在那里有几个self.response.out.write语句，因为我想知道我是否收到了对查询结果的回复。我收到了结果，所以我知道这不是OAuth2问题。我只是不知道它还能是什么。

非常感谢提前。

Answer 1

“查看源代码”，加上一些内容（Firebug，Chrome开发者工具），它会告诉您JavaScript中的语法错误，这些都是您的朋友。看看你提供的内容，我猜测扩展{{ data }}会导致语法错误。正如asgallant所说，您正在设置countdata，而是引用query_response。

由于您的数据是日期和计数，因此您不会遇到实体转义问题，但如果您将查询扩展为包含其他内容，则会遇到{{ data }}存在的问题转义为HTML，它需要逃避JS。要处理这个问题，您需要escapejs过滤器。

Answer 2

在您的代码中：

countdata = { 'cols': ({'id':columnNameDate, 'label':columnNameDate, 'type':'string'},
  {'id':columnNameVal, 'label':columnNameVal, 'type':'number'})}

应该是：

countdata = { 'cols': [{'id':columnNameDate, 'label':columnNameDate, 'type':'string'},
  {'id':columnNameVal, 'label':columnNameVal, 'type':'number'}]}

App Engine上的Google Visualization API问题

2 个答案: