Python 如何使用flask（表格、饼图等）在页面上获取多个元素

我正在尝试使用flask将多个元素添加到一个页面中。我可以用下面的代码在很大程度上做到这一点，但无法获得多个图表。我正在使用python和chart.js以及pandas来获取数据。我也在使用html和CSS

Python:

d1 = {'Fruits' : pd.Series([10]),
     'Vegetables' : pd.Series([12]),
     'Drinks' : pd.Series([2])}
df1 = pd.DataFrame(d1)

d2 = {'Fruits' : pd.Series([1]),
     'Vegetables' : pd.Series([18]),
     'Drinks' : pd.Series([21])}
df2 = pd.DataFrame(d2)


labels_1 = [
    'Bananas', 'Apples',
    'Oranges', 'Strawberries', 'Lemons',
    'Watermelons', 'Coconuts'
]

values_1 = [
    10.0, 20.0, 10.0, 20.0, 20.0, 10.0, 10.0
]

labels_2 = [
    'Bananas', 'Apples',
    'Oranges', 'Strawberries', 'Lemons',
    'Watermelons', 'Coconuts'
]

values_2 = [
    20.0, 10.0, 20.0, 10.0, 10.0, 20.0, 10.0
]

labels_3 = [
    'Bananas', 'Apples',
    'Oranges', 'Strawberries', 'Lemons',
    'Watermelons', 'Coconuts'
]

values_3 = [
    30.0, 10.0, 10.0, 10.0, 20.0, 10.0, 10.0
]

colors = [
    "#46BFBD", "#F7464A", "#FDB45C", "#FEDCBA",
    "#ABCDEF", "#DDDDDD", "#ABCABC", "#4169E1",
    "#C71585", "#FF4500", "#FEDCBA", "#46BFBD"]


app = Flask(__name__)
                  

@app.route('/dashboard')
def dashboard():
    return render_template('dashboard.html', title1='Day 1', tables1=[
                                df1.to_html(index=False, classes='dashboard1', header="true")], title2='Day 2', tables2=[
                                df2.to_html(index=False, classes='dashboard2', header="true")],
                                title3='Produce Sold on Monday', max=17000, set=zip(values_1, labels_1, values_2, labels_2, values_3, labels_3, colors),
                                title4='Produce Sold on Tuesday', title5='Produce Sold on Wednesday')


if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080)

@app.route('/dashboard')
def dashboard():
    return render_template('dashboard.html', title1='Day 1', tables1=[
                                df1.to_html(index=False, classes='dashboard1', header="true")], title2='Day 2', tables2=[
                                df2.to_html(index=False, classes='dashboard2', header="true")],
                                title3='Produce Sold on Monday', max=17000, set1=zip(values_1, labels_1, colors),
                                title4='Produce Sold on Tuesday', set2=zip(values_2, labels_2, colors),
                                title5='Produce Sold on Wednesday', set3=zip(values_3, labels_3, colors))


if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080)

HTML:

制作记录
水果摊销售
{{title1}}
{表1%中的表的%1}
{{表|安全}}
{%endfor%}
{{title2}}
{表2%中的表的%1}
{{表|安全}}
{%endfor%}
产生电解液击穿
{{title3}}
变量数据=[
{集合%中项目、标签、颜色的百分比}
{
值：{{item}}，
标签：“{label}}”，
颜色：“{{colors}}”
},
{%endfor%}
];
//获取条形图画布
var mychart=document.getElementById（“chart1”）.getContext（“2d”）；
步骤=10
max={{max}}
//画饼图
新图表（document.getElementById（“chart1”）.getContext（“2d”））.Pie（pieData）；
{{title4}}
变量数据=[
{集合%中项目、标签、颜色的百分比}
{
值：{{item}}，
标签：“{label}}”，
颜色：“{{colors}}”
},
{%endfor%}
];
//获取条形图画布
var mychart=document.getElementById（“chart2”）.getContext（“2d”）；
步骤=10
max={{max}}
//画饼图
新图表（document.getElementById（“chart2”）.getContext（“2d”））.Pie（pieData）；
{{title5}}
变量数据=[
{集合%中项目、标签、颜色的百分比}
{
值：{{item}}，
标签：“{label}}”，
颜色：“{{colors}}”
},
{%endfor%}
];
//获取条形图画布
var mychart=document.getElementById（“chart3”）.getContext（“2d”）；
步骤=10
max={{max}}
//画饼图
新图表（document.getElementById（“chart3”）.getContext（“2d”））.Pie（pieData）；

我收到的错误是：

{集合%中项目、标签、颜色的百分比} ValueError:要解压缩的值太多（应为3个）

---

看起来我必须修改HTML以适应多个图表，但我不知道如何做到这一点。这是最好的方法吗？我是否应该使用不同的方法，如matplotlib？

该错误是因为zip对象有7个值要解压缩，而不是3个值。 如果你在集合%中为a，b，c，d，e，f，g做了

{%

您也可以将数据排列为一个dict列表，例如：

[{"item": ..., "label": ..., "color": ..., "value": ...}, ...]

这样，您就可以像这样渲染它们（如果您有更多的关键点，并且不想渲染它们，则无需担心）：

我可以通过为每个图形设置3个不同的变量来实现这一点，因为“set”是一个关键参数，无法复制。以下是我使用的代码：

Python:

d1 = {'Fruits' : pd.Series([10]),
     'Vegetables' : pd.Series([12]),
     'Drinks' : pd.Series([2])}
df1 = pd.DataFrame(d1)

d2 = {'Fruits' : pd.Series([1]),
     'Vegetables' : pd.Series([18]),
     'Drinks' : pd.Series([21])}
df2 = pd.DataFrame(d2)


labels_1 = [
    'Bananas', 'Apples',
    'Oranges', 'Strawberries', 'Lemons',
    'Watermelons', 'Coconuts'
]

values_1 = [
    10.0, 20.0, 10.0, 20.0, 20.0, 10.0, 10.0
]

labels_2 = [
    'Bananas', 'Apples',
    'Oranges', 'Strawberries', 'Lemons',
    'Watermelons', 'Coconuts'
]

values_2 = [
    20.0, 10.0, 20.0, 10.0, 10.0, 20.0, 10.0
]

labels_3 = [
    'Bananas', 'Apples',
    'Oranges', 'Strawberries', 'Lemons',
    'Watermelons', 'Coconuts'
]

values_3 = [
    30.0, 10.0, 10.0, 10.0, 20.0, 10.0, 10.0
]

colors = [
    "#46BFBD", "#F7464A", "#FDB45C", "#FEDCBA",
    "#ABCDEF", "#DDDDDD", "#ABCABC", "#4169E1",
    "#C71585", "#FF4500", "#FEDCBA", "#46BFBD"]


app = Flask(__name__)
                  

@app.route('/dashboard')
def dashboard():
    return render_template('dashboard.html', title1='Day 1', tables1=[
                                df1.to_html(index=False, classes='dashboard1', header="true")], title2='Day 2', tables2=[
                                df2.to_html(index=False, classes='dashboard2', header="true")],
                                title3='Produce Sold on Monday', max=17000, set=zip(values_1, labels_1, values_2, labels_2, values_3, labels_3, colors),
                                title4='Produce Sold on Tuesday', title5='Produce Sold on Wednesday')


if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080)

@app.route('/dashboard')
def dashboard():
    return render_template('dashboard.html', title1='Day 1', tables1=[
                                df1.to_html(index=False, classes='dashboard1', header="true")], title2='Day 2', tables2=[
                                df2.to_html(index=False, classes='dashboard2', header="true")],
                                title3='Produce Sold on Monday', max=17000, set1=zip(values_1, labels_1, colors),
                                title4='Produce Sold on Tuesday', set2=zip(values_2, labels_2, colors),
                                title5='Produce Sold on Wednesday', set3=zip(values_3, labels_3, colors))


if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080)

HTML:


产生电解液击穿
{{title3}}
变量数据=[
{集合1%中项目、标签、颜色的百分比}
{
值：{{item}}，
标签：“{label}}”，
颜色：“{{colors}}”
},
{%endfor%}
];
//获取条形图画布
var mychart=document.getElementById（“chart1”）.getContext（“2d”）；
步骤=10
max={{max}}
//画饼图
新图表（document.getElementById（“chart1”）.getContext（“2d”））.Pie（pieData）；
{{title4}}
变量数据=[
{set2%中项目、标签、颜色的百分比}
{
值：{{item}}，
标签：“{label}}”，
颜色：“{{colors}}”
},
{%endfor%}
];
//获取条形图画布
var mychart=document.getElementById（“chart2”）.getContext（“2d”）；
步骤=10
max={{max}}
//画饼图
新图表（document.getElementById（“chart2”）.getContext（“2d”））.Pie（pieData）；
{{title5}}
变量数据=[
{集合3%中项目、标签、颜色的百分比}
{
值：{{item}}，
标签：“{label}}”，
颜色：“{{colors}}”
},
{%endfor%}
];
//获取条形图画布
var mychart=document.getElementById（“chart3”）.getContext（“2d”）；
步骤=10
max={{max}}
//画饼图
新图表（document.getElementById（“chart3”）.getContext（“2d”））.Pie（pieData）；

  <center>
    <h1>Produce Solde Breakdown</h1>
  </center>
  <center>
    <h2>{{ title3 }}</h2>
    <canvas id="chart1" width="600" height="400"></canvas>
    <script>
      var pieData = [
        {% for item, label, colors in set1 %}
          {
            value: {{item}},
            label: "{{label}}",
            color : "{{colors}}"
          },
        {% endfor %}
      ];

      // get bar chart canvas
      var mychart = document.getElementById("chart1").getContext("2d");
      steps = 10
      max = {{ max }}

      // draw pie chart
      new Chart(document.getElementById("chart1").getContext("2d")).Pie(pieData);
    </script>
    <h2>{{ title4 }}</h2>
    <canvas id="chart2" width="600" height="400"></canvas>
    <script>
      var pieData = [
        {% for item, label, colors in set2 %}
          {
            value: {{item}},
            label: "{{label}}",
            color : "{{colors}}"
          },
        {% endfor %}
      ];

      // get bar chart canvas
      var mychart = document.getElementById("chart2").getContext("2d");
      steps = 10
      max = {{ max }}

      // draw pie chart
      new Chart(document.getElementById("chart2").getContext("2d")).Pie(pieData);
    </script>
    <h2>{{ title5 }}</h2>
    <canvas id="chart3" width="600" height="400"></canvas>
    <script>
      var pieData = [
        {% for item, label, colors in set3 %}
          {
            value: {{item}},
            label: "{{label}}",
            color : "{{colors}}"
          },
        {% endfor %}
      ];

      // get bar chart canvas
      var mychart = document.getElementById("chart3").getContext("2d");
      steps = 10
      max = {{ max }}

      // draw pie chart
      new Chart(document.getElementById("chart3").getContext("2d")).Pie(pieData);
    </script>