如何將JSON字符串分配給Google餅圖數據變量

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 | safe}} 。

此外，這還假定您完全控制了此JSON的內容，因為否則您將容易受到跨站點腳本攻擊的影響 。