Question

我的html文件中有一个名为“sentiments”的字典（从python类发送）。以下内容：

{% if sentiments %}
    <p>{{sentiments}}</p>
{% else %}
    <p>none</p>
{%endif%}

打印：

('very positive', 34)
('positive', 64)
('neutral', 44)
('negative', 11)
('very negative', 27)

所以我知道很多工作正常。在一个单独的javascript文件中，我有一个带有硬编码值的morris条形图，如下所示：

Morris.Bar({
    element: 'bar-chart',
    data: [
        { x: 'V. Pos', y: 10},
        { x: 'Pos', y: 20},
        { x: 'Neutral', y: 30},
        { x: 'Neg', y: 20},
        { x: 'V.Neg', y: 10},
    ],

    xkey: 'x',
    ykeys: ['y'],
    labels: ['# Tweets'],
    barColors: function (row, series, type) {
        console.log("--> "+row.label, series, type);
        if(row.label == "V. Pos") return "#3300FF";
        else if(row.label == "Pos") return "#6600FF";
        else if(row.label == "Neutral") return "#9900FF";
        else if(row.label == "Neg") return "#FF3333";
        else return "#ff0000";
    }
});

我按如下方式调用此脚本：

<div class="bar"; style="float:left; width:50%;">
    <div id="bar-chart"></div>
    <script src="../static/barchart.js"></script>
</div>

我想将字典“情绪”传递给此脚本并使用其中的值来填充图表，而不是我现在拥有的硬编码值。任何帮助将非常感激。我正在使用Flask来连接我的python和html。

Answer 1

您可以通过执行以下操作将变量转录为JS：

<body>
  <script>
    var myData = JSON.parse('{{sentiments_str | safe}}')
  </script>
</body>

在呈现网页时，请确保使用sentiments传递json.dumps，例如：

return render_template('page.html', sentiments_str=json.dumps(sentiments))

将HTML变量传递给单独的javascript文件

1 个答案: