Question

解析推文后，我得到了一个数据数组（在我的视图中是一个python列表）。

我想用它在另一个视图中构建图表。

我成功将其传递到下一个视图的Flask模板标签，但我无法弄清楚如何在使用Chart.js构建图表的javascript代码中使用此数据

例如：

在Google上进行研究后，我尝试将图表标签数组传递给javascript。 我遇到的问题是只传递了第一个元素，数据类型现在是string而不是Array。

将routes.py的values变量传递给pie.html中的labelsData变量的正确方法是什么？

Flask- routes.py

[...]
@app.route("/piechart/<twitterhandle>")
def pie(twitterhandle):

    from app.twitter_parser import twitter_parser as tp

    alltweets = tp.get_all_tweets(twitterhandle)
    word_dict = tp.word_count(alltweets)
    keywords_dict = tp.top10words(word_dict)

    # keywords_dict is a dictionnary containing the 10 most
    # used words as keys and their respective count as value
    values = [values for labels, values in keywords_dict]
    labels = [labels for labels, values in keywords_dict]
    colors = [ "#F7464A", "#46BFBD", "#FDB45C", "#FEDCBA","#ABCDEF", "#DDDDDD", "#ABCABC", "#CAABB9", "#46F7F3", "#EFCDAB"]


    # Render the Template
    return render_template('pie.html', values=values, labels=labels,
            colors=colors)

pie.html

[...]    
<meta id="labels_data" data-labels={{labels}}>
<meta id="values_data" data-values={{values}}>
<meta id="colors_data" data-colors={{colors}}>
[...]
    <script>
        var labelsData=document.getElementById("labels_data").dataset.labels;
        var valuesData=document.getElementById("values_data").dataset.values;
        var colorsData=document.getElementById("colors_data").dataset.colors;

        new Chart(document.getElementById("pie-chart"), {
         type: 'pie',
          data: {
            labels: labelsData,
            datasets: [{
              label: "Pie Chart",
              backgroundColor: colorsData,
            data: valuesData
            }]
          },
          options: {
            title: {
              display: true,
              text: 'Pie Chart Title'
            }
          }
        });
      </script>

Answer 1

我在本地系统中尝试了您的代码，我终于得到了这个SO Answer

的答案

Flask为此提供了一个Jinja过滤器：tojson将结构转储到一个JSON字符串并标记它是安全的，以便Jinja不会自动显示它。

因此我们可以将值传递给Javascript，通过添加此过滤器，我们可以将这些值传递给Javascript变量。

请参阅我的以下代码段，如果有任何问题请与我们联系！

<强> HTML：

<body>
    <canvas id="pie-chart" width="600" height="400"></canvas>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<script>
    new Chart(document.getElementById("pie-chart"), {
         type: 'pie',
          data: {
            labels: {{labels | tojson}},
            datasets: [{
              label: "Pie Chart",
              backgroundColor: {{colors | tojson}},
            data: {{values | tojson}}
            }]
          },
          options: {
            title: {
              display: true,
              text: 'Pie Chart Title'
            }
          }
        });
</script>

<强>烧瓶中：

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def hello_world():
    values = [12, 19, 3, 5, 2, 3]
    labels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']
    colors = ['#ff0000','#0000ff','#ffffe0','#008000','#800080','#FFA500']
    return render_template('pie.html', values=values, labels=labels, colors=colors)

if __name__ == '__main__':
    app.run()

将数组从Flask视图传递到另一个视图的{j}代码

1 个答案: