使用烧瓶变量作为 highcharts 的数据源

Question

我正在从我的数据库中提取数据，并尝试将其设置为 highcharts 的数据。我以以下格式将变量从烧瓶传递到我的模板：

[{
  'x': 185.42,
  'team': 'PIT', 
  'y': 99.79,
  'position': 'QB', 
  'f_name': 'Bruce Gradkowski',
  'number': 5
},
{
  'x': 190.5,
  'team': 'DET', 
  'y': 105.23, 
  'position': 'QB', 
  'f_name': 'Matthew Stafford',
  'number': 9
}]

基本上它是一个充满字典的列表。如果我将该文本复制并粘贴到 highcharts 数据部分，它就像一个魅力。我没有使用 jsonify 或 .getJSON（主要是因为我一直在网上查找它，但仍然不清楚如何将数据从 .getJSON 传递到 highcharts 数据）。相反，我找到了 this 并认为它会是更容易将数据传递给模板和使用 {{ var_name }} 为 highcharts 系列设置数据的 javascript 函数内部。但是，它不起作用。为什么？你能给我一个例子，说明如何使用 .getJSON 来设置 Highcharts 系列的数据，或者帮助我使用变量作为数据的数据源吗？

Answer 1

Jinja2 将所有变量作为安全措施进行转义。您显示的字典数组默认呈现为：

[{'f_name': 'Bruce Gradkowski', 'team': 'PIT', 'number': 5, 'position': 'QB', 'y': 99.79, 'x': 185.42}, {'f_name': 'Matthew Stafford', 'team': 'DET', 'number': 9, 'position': 'QB', 'y': 105.23, 'x': 190.5}]

注意引号是如何转换成 HTML 实体的。

为防止转义，您可以添加safe 过滤器，如下所示：

{{ var_name|safe }}

请注意，这只是因为 Javascript 和 Python 恰好有类似的数组和字典语法。