如何将 JSON 字符串分配给 google 饼图数据变量

Question

我面临的问题是，在我的网络服务器中，我通过 render_template 将 JSON 作为参数发送到我的网站，我想在网站上使用 JSON 来显示google 饼图。

问题是，如果我像这样静态分配 google 饼图数据：

var data = new google.visualization.DataTable({
  cols: [
    { id: "", label: "objeto", type: "string" },
    { id: "", label: "quantidade", type: "number" }
  ],
  rows: [
    { c: [{ v: "Caixa 2" }, { v: 3 }] },
    { c: [{ v: "Caixa 3" }, { v: 3 }] },
    { c: [{ v: "Caixa 4" }, { v: 3 }] }
  ]
});

效果很好。另一方面，如果我使用从我的服务器接收到的 JSON 动态分配它，如下所示：

var data = new google.visualization.DataTable({{json}});

我的网站不再显示 google 饼图。

到目前为止，我一直在尝试通过 google 图表将 JSON 随意调整为所需的格式，因为我认为这是唯一的问题，但现在它是所需的格式并且它静态工作我不知道有什么方法可以将我收到的 JSON 分配给数据 var.

这是我想要工作的理想功能。

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

  var options = {
    title: 'gráfico Objeto/Quantidade',
    is3D: true
  };

  var chart = new google.visualization.PieChart(
    document.getElementById('piechart')
  );
  chart.draw(data, options);
}

想要的结果： http://prntscr.com/oejojv

实际结果： http://prntscr.com/oejooe

Answer 1

JSON 字符串正在 HTML-escaped。假设您正在使用 Flask（根据您提到的 render_template 进行猜测），您需要执行类似 {{json | safe}}.

的操作

此外，这假设您可以完全控制此 JSON 的内容，否则您 容易受到 cross-site 脚本攻击 。

如何将 JSON 字符串分配给 google 饼图数据变量

How to assign a JSON string to a google pie chart data var

html

javascript

json

google-visualization