Python Flask如何将列表数据传入Google Pie Chart并在JS中嵌入Jinja代码

核心注意事项 #

Jinja模板默认会自动转义HTML特殊字符，直接在JavaScript中嵌入Jinja变量时必须加safe过滤器，避免引号等特殊字符被转义后触发JS语法错误。

实现方法1：直接使用tojson过滤器（更稳妥，无语法风险） #

无需手动写循环，直接将后端传递的列表转为原生JS数组，和表头拼接后直接传入即可，完整修改后的前端代码如下：

<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() {
    // 先定义表头，再拼接后端传递的动态数据
    const chartData = [['模块名称', '统计数值']].concat({{ row_data|tojson|safe }});
    const data = google.visualization.arrayToDataTable(chartData);

    const options = {
      title: '模块统计分布', // 可按需修改图表标题
      pieHole: 0.4,
    };

    const chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
  }
</script>

<div id="donutchart" style="width: 900px; height: 500px;"></div>

实现方法2：使用自定义Jinja循环 #

如果需要对每行数据做额外处理，可以用循环写法，注意要判断最后一行不要加多余逗号，避免JS语法错误：

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['模块名称', '统计数值'],
    {% for i,j in row_data %}
    ["{{ i|safe }}", {{ j }}]{% if not loop.last %},{% endif %}
    {% endfor %}
  ]);

  // 后续options、渲染逻辑保持不变
}

内容的提问来源于stack exchange，提问作者lazar cognos