Question

我面临的问题是，在Web服务器中，我正在通过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分配给数据变量。

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

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换码。假设您使用的是Flask（根据对render_template的提及进行猜测），则需要执行类似{{json | safe}}的操作。

此外，这还假定您完全控制了此JSON的内容，因为否则您将易受跨站点脚本攻击。

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

1 个答案: