Question

我正在创建一个我想拥有Google图表的Web服务。

我有一个脚本，该脚本以google.visualization.arrayToDataTable可接受的格式创建数据，并将其以字符串格式传递给变量google.visualization.arrayToDataTable（{{data}}）

当我有了html模板并且自己用数据插入字符串时，一切都呈现完美，当我访问源代码时，我看到：

Spread syntax

但是，当我使用我的Flask应用程序通过render_template方法调用此网站时，会得到：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([['var1', 'var2', 'var3'], [0.0, 10.0, 12.48], [1.0, 1.0, 5.64], [2.0, 5.0, 3.68], [3.0, 3.0, 3.2], [4.0, 3.0, 3.52], [5.0, 2.0, 2.16], [6.0, 1.0, 1.76], [7.0, 0.0, 1.32], [8.0, 0.0, 1.68], [9.0, 0.0, 0.8], [10.0, 2.0, 0.76], [11.0, 0.0, 0.92], [12.0, 2.0, 0.96], [13.0, 2.0, 1.32], [14.0, 0.0, 1.0799999999999996], [15.0, 0.0, 0.96], [16.0, 0.0, 0.68], [17.0, 1.0, 0.52], [18.0, 0.0, 0.44], [19.0, 1.0, 0.28], [20.0, 0.0, 0.4], [21.0, 0.0, 0.68], [22.0, 1.0, 0.44], [23.0, 0.0, 0.16], [24.0, 0.0, 0.08], [25.0, 1.0, 0.08], [26.0, 0.0, 0.16], [27.0, 1.0, 0.32], [28.0, 0.0, 0.48], [29.0, 0.0, 0.4], [30.0, 0.0, 3.2]]);

        var options = {
          title: 'perc_diff',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

该页面不希望显示Google图表。模板是：

    <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([[&#39;var1&#39;, &#39;var2&#39;, &#39;var3&#39;], [0.0, 10.0, 12.48], [1.0, 1.0, 5.64], [2.0, 5.0, 3.68], [3.0, 3.0, 3.2], [4.0, 3.0, 3.52], [5.0, 2.0, 2.16], [6.0, 1.0, 1.76], [7.0, 0.0, 1.32], [8.0, 0.0, 1.68], [9.0, 0.0, 0.8], [10.0, 2.0, 0.76], [11.0, 0.0, 0.92], [12.0, 2.0, 0.96], [13.0, 2.0, 1.32], [14.0, 0.0, 1.0799999999999996], [15.0, 0.0, 0.96], [16.0, 0.0, 0.68], [17.0, 1.0, 0.52], [18.0, 0.0, 0.44], [19.0, 1.0, 0.28], [20.0, 0.0, 0.4], [21.0, 0.0, 0.68], [22.0, 1.0, 0.44], [23.0, 0.0, 0.16], [24.0, 0.0, 0.08], [25.0, 1.0, 0.08], [26.0, 0.0, 0.16], [27.0, 1.0, 0.32], [28.0, 0.0, 0.48], [29.0, 0.0, 0.4], [30.0, 0.0, 3.2]]);

        var options = {
          title: 'perc_diff',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

从python Flask应用程序以字符串格式传递数据。

我相信错误的原因是在渲染时将“”替换为“”。

有人能帮我解决这个问题吗？

Answer 1

在将{{data}}更改为{{data | safe}}

之后，它起作用

“显示instad的HTML编号”

1 个答案: